Question

我在我的项目中使用bxSlider。我想制作具有多个图像的垂直和水平缩略图滑块。我在我的项目中使用bootstrap框架来实现响应。我使用bxslider为水平和垂直制作thmbnail滑块。 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 
            });
});

但是如果我调整浏览器窗口大小，你会看到垂直滑块根本没有响应？以及如何在中心对齐图像？因为我有肖像和风景图像。

Answer 1

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

这是fiddle

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

从他们的官方文件：

垂直转盘遵循大多数与水平转盘相同的规则。但是，不使用maxSlides设置，因为垂直轮播将始终只有一个幻灯片。因此，我们不必使用此设置来容纳不同的屏幕宽度。

如何使垂直图像缩略图滑块响应？

1 个答案: