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

  1. Image gallery with captions
  2. Auto show with start / stop controls
  3. Manual show without infinite loop
  4. Slidehow using adaptiveHeight
  5. Carousels demystified - in depth explanation with examples
  6. Carousel - static number of slides showing
  7. Carousel - dynamic number of slides showing
  8. Thumbnail pager - method 1
  9. Thumbnail pager - method 2
  10. Vertical slideshow
  11. Custom next / prev control selectors
  12. Multiple slideshows
  13. Callback API
  14. Public methods
  15. Ticker
Coded with ♥ by
Steven Wanderski Chicago Web Developer