jquery - 如何使垂直图像缩略图 slider 响应？

Question

我在我的元素中使用 bxSlider。我想制作包含多个图像的垂直和水平缩略图 slider 。我在我的元素中使用 Bootstrap 框架来实现响应能力。我使用 bxslider 为水平和垂直制作 thmbnail slider 。 http://bxslider.com/examples/carousel-demystified#example

这是我的 Fiddle

代码:

     $(document).ready(function() {
            $('#bxslider-vertical .bxslider').bxSlider({
                mode: 'vertical', 
                infiniteLoop: false,
                pager:false,
                slideWidth: 200,
                maxSlides: 3,
                minSlides: 3,                
                slideMargin: 10                                 
            });

             $('#bxslider-horizontal .bxslider').bxSlider({
                mode: 'horizontal', 
                infiniteLoop: false,
                pager:false,
                slideWidth: 200,
                maxSlides: 4,
                minSlides: 2,                
                slideMargin: 10 
            });
});

但是如您所见，如果我调整浏览器窗口的大小，垂直 slider 根本没有响应？ 以及如何在中心对齐图像？因为我有肖像和风景图像。

Answer 1

bxslider 是一个响应式内容 slider 。 但是，对于垂直 slider ，您需要提及可见的幻灯片数量，并且垂直 slider 不考虑 maxSlides 属性。

这是 fiddle

     $('#bxslider-vertical .bxslider').bxSlider({
                mode: 'vertical', 
                infiniteLoop: false,
                pager:false,
                slideWidth: 200,
                minSlides: 2,                
                slideMargin: 10                                 
            });

来自他们的官方文档:

垂直轮播遵循与水平轮播大部分相同的规则。但是，没有使用 maxSlides 设置，因为垂直轮播将始终只有一张幻灯片。因此，我们不必通过此设置来适应不同的屏幕宽度。