Multiple slideshows

Slideshow 1

Slideshow 2


  mode: 'fade',
  auto: true,
  autoControls: true,
  pause: 2000

  auto: true,
  autoControls: true,
  pause: 3000,
  slideMargin: 20


<h3>Slideshow 1</h3>
<ul id="slider1">
  <li><img src="/images/730_200/hill_trees.jpg" /></li>
  <li><img src="/images/730_200/me_trees.jpg" /></li>
  <li><img src="/images/730_200/houses.jpg" /></li>

<h3>Slideshow 2</h3>
<ul id="slider2">
  <li><img src="/images/730_200/tree_root.jpg" /></li>
  <li><img src="/images/730_200/trees.jpg" /></li>
  <li><img src="/images/730_200/hill_road.jpg" /></li>

Note that parent elements do not need to have a classname of "bxslider". Simply use any jQuery selector to target the parent element, then call .bxSlider().

Add sliders to any website
with just two lines of code
Check out!