bxslider图像具有不同的宽度
我正在尝试使用不同尺寸的图像的bxslider，我希望它们具有相同的高度和不同的宽度。 我希望在http://bxslider.com/examples/carousel-demystified上有一个类似旋转木马的旋转木马。 这些示例工作正常，但是，我有300,400和500像素宽的图像，每个图像具有不同的高度，可以缩放到400px的相同高度。 我不想调整图像的宽度，使它们相同或裁剪它。 如何将bxslider与不同宽度的图像一起使用？
如果使用bxslider无法完成此操作，那么此行为是否已存在jquery插件？
示例： http ： //jsfiddle.net/GdD52/2/
鉴于我对网络画廊的热爱，我想写一个小脚本来创建一个无限滚动的画廊，其中包含不同宽度的图像： 小提琴
我知道你希望改变Gallery bxslider，但这个解决方案似乎是可以接受的
我认为bxslider Gallery不会给你这种可能性
正如你可以在我的小提琴中看到的那样，有一个画廊，画面宽度不同。
脚本只是一个例子，如果你投票我的答案我可以改进它。
由于我在这个其他的FIDDLE中喜欢这个问题，你会发现这个画廊的另一个改进版本，其中包含用于在树组中浏览图像的按钮
再次，脚本可以改进，下一步可能是：
N1使画廊响应
N2在jQuery插件中转换scipt
#bx-wrapper img { width: auto !important }
但我遇到触摸滚动问题。 所以我打算尝试owlCarousel 。
好的，我只是把这个基本代码作为一个想法 – FIDDLE 。
这是一个开始，只要告诉我你想要的改变。 它并不完美，因为其中一张图片太宽，但根据您的标准，这很容易修复。 我所做的是在CSS中完成大部分样式，并将图片浮动到每个div中。
JS
var first, second, third; var numphotos = $('.hidden img').length; if(numphotos === 0) { first = 0; second = 0; third = 0; } if(numphotos === 1) { first = 0; second = 1; third = 0; putphotos(first, second, third); } if(numphotos === 2) { first = 0; second = 1; third = 2; putphotos(first, second, third); } if(numphotos > 2) { first = 0; second = 1; third = 2; putphotos(first, second, third); } $('.forward').on('click', function(){ first = first+1; second = second+1; third = third+1; putphotos(first, second, third); if(third == numphotos) { first = 1; second = 2; third = 3; putphotos(first, second, third); } }); function putphotos(first, second, third) { $( '.minishowme:nth-child(1)' ).html(''); $( '.minishowme:nth-child(2)' ).html(''); $( '.minishowme:nth-child(3)' ).html(''); $('.hidden img:nth-child(' + first + ')').clone().appendTo( '.minishowme:nth-child(1)' ); $('.hidden img:nth-child(' + second + ')').clone().appendTo( '.minishowme:nth-child(2)' ); $('.hidden img:nth-child(' + third + ')').clone().appendTo( '.minishowme:nth-child(3)' ); }
我希望在
http://bxslider.com/examples/carousel-demystified上有一个类似旋转木马的旋转木马。 这些例子很好……
该示例不会使幻灯片居中 。 它显示了3个与左上角对齐的幻灯片。
要显示具有不同高度和宽度的图像，您应将它们对齐到相同的宽度
- 并且在中间垂直居中 – 演示： http ： //jsfiddle.net/tK9Wa/1/
- 或使用溢出：隐藏以使相同的高度 – 演示： http ： //jsfiddle.net/6jQPg/3/