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

Question

I am using bxSlider in my project. I want to make vertical and horizontal thumbnail slider with multiple images. I am using bootstrap framework in my project to achieve responsiveness. I using bxslider to make thmbnail slider for both horizontal and vertical. http://bxslider.com/examples/carousel-demystified#example

Here is my Fiddle

Code:

     $(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 
            });
});

But as you see vertical slider is not at all responsive if i resize browser window ? And how to align image at center ? As I have both portraits and landscape image.

Answer 1

bxslider is a responsive content slider. However, for vertical slider you need to mention the number of slides that will be visible, and maxSlides attribute is not considered for vertical sliders.

Here's the fiddle

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

From their official documentation:

Vertical carousels follow most of the same rules as horizontal carousels. However, the maxSlides setting is not used as vertical carousels will always have only one slide across. Therefore, we do not have to accomodate different screen widths with this setting.