Multiple slideshows

Slideshow 1

Slideshow 2

JS:
$('#slider1').bxSlider({
  mode: 'fade',
  auto: true,
  autoControls: true,
  pause: 2000
});

$('#slider2').bxSlider({
  auto: true,
  autoControls: true,
  pause: 3000,
  slideMargin: 20
});
HTML:
<style>
  ul {
    padding: 0;
    margin: 0;
  }
</style>

<h3>Slideshow 1</h3>
<ul id="slider1">
  <li><img src="http://placehold.it/900x200&text=Slide 1a" /></li>
  <li><img src="http://placehold.it/900x200&text=Slide 2a" /></li>
  <li><img src="http://placehold.it/900x200&text=Slide 3a" /></li>
</ul>

<h3>Slideshow 2</h3>
<ul id="slider2">
  <li><img src="http://placehold.it/900x200&text=Slide 1b" /></li>
  <li><img src="http://placehold.it/900x200&text=Slide 2b" /></li>
  <li><img src="http://placehold.it/900x200&text=Slide 3b" /></li>
</ul>

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