Carousel - dynamic number of slides
JS:
$('.bxslider').bxSlider({
minSlides: 3,
maxSlides: 4,
slideWidth: 170,
slideMargin: 10
});
HTML:
<ul class="bxslider">
<li><img src="http://placehold.it/170x200&text=FooBar1" /></li>
<li><img src="http://placehold.it/170x200&text=FooBar2" /></li>
<li><img src="http://placehold.it/170x200&text=FooBar3" /></li>
<li><img src="http://placehold.it/170x200&text=FooBar4" /></li>
<li><img src="http://placehold.it/170x200&text=FooBar5" /></li>
<li><img src="http://placehold.it/170x200&text=FooBar6" /></li>
<li><img src="http://placehold.it/170x200&text=FooBar7" /></li>
<li><img src="http://placehold.it/170x200&text=FooBar8" /></li>
</ul>
This slider always displays no less than three slides (minSlides) and always displays no more than four slides (maxSlides). Therefore when the minSlides number (3) is reached the slides will be scaled down.
Examples
- Image gallery with captions
- Auto show with start / stop controls
- Manual show without infinite loop
- Slidehow using adaptiveHeight
- Carousels demystified - in depth explanation with examples
- Carousel - static number of slides showing
- Carousel - dynamic number of slides showing
- Thumbnail pager - method 1
- Thumbnail pager - method 2
- Vertical slideshow
- Custom next / prev control selectors
- Multiple slideshows
- Callback API
- Public methods
- Ticker