Stacknerd
Stacknerd

Reputation: 469

BxSlider maxslide and minslide

So basically, i am using BxSlider with 27 thumbnails, on each is loaded a lightbox so you can check every image.

Thing is, when i load the script with this :

$('ul#items').bxSlider({
          minSlides: 5,
          maxSlides: 5,
          slideWidth: '920px'
        });

I am forced to get 5 thumbnails on everypage of the slider. So on the last page, my last 3 thumbnails are the first 3 repeated.

I tried using this, instead to fix my problem,

$('ul#items').bxSlider({
          minSlides: 1,
          maxSlides: 5,
          slideWidth: '920px'
        });

But it seems that if you input 1 as minSlides, the script will put only 1 (which gives you 27 pages of 1 thumbnail) slide per page, even if you specefy a maximum of 5 per slide.

Any way to fix this issue ? thanks alot !

Upvotes: 0

Views: 7373

Answers (2)

Zanderi
Zanderi

Reputation: 917

If you look at example 3 it describes the issue you are having. Because the slideWidth property is set to be larger than the container it defaults to the minSlide property to allow the slides to scale.

"Here we intentionally set a slideWidth larger than the available space. In this case, the slider defaults to the minSlide value, and scales appropriately." - bxslider example 3 description

To get the desired effect you are looking for you should set the max-width value as the slideWidth property. This way the screen will allow you to switch between minSlide and maxSlide as the viewport allows. You can see this demonstrated in example 4.

I hope this helps, as it took me a while to figure out for myself.

$('ul#items').bxSlider({
    slideWidth: 200,
    minSlides: 1,
    maxSlides: 5,
    slideMargin: 10
});

Upvotes: 3

try this

$('ul#items').bxSlider({
          minSlides: 1,
          maxSlides: 5,
          slideWidth: '920px',
          infiniteLoop: false
        });

Upvotes: 0

Related Questions