title: multiple bxSlider instances on one page
body: <p>I have four slideshows on one page that I want to just run in loops, using <a href="http://bxslider.com/examples/multiple-slideshows" rel="nofollow">bxSlider</a></p>
  
  <p>I'm great with mark-up and CSS, but not yet very proficient with javascript.  I think I must be missing a key element, because none of the slideshows are currently working.  I would love some help getting all four to work.  Thanks!</p>
  
  <p>JS:</p>
  
  <pre><code>&lt;script type="text/javascript" src="js/jquery.bxslider.min.js"&gt;&lt;/script&gt;
  
    &lt;script type="text/javascript"&gt;
    $('#slider1').bxSlider({
      auto: true,
      autoControls: true,
      pause: 3000,
      slideMargin: 20
    });
  
    $('#slider2').bxSlider({
      auto: true,
      autoControls: true,
      pause: 3000,
      slideMargin: 20
    });
  
    $('#slider3').bxSlider({
      auto: true,
      autoControls: true,
      pause: 3000,
      slideMargin: 20
    });
  
    $('#slider4').bxSlider({
      auto: true,
      autoControls: true,
      pause: 3000,
      slideMargin: 20
    });
    &lt;/script&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.slider {
      position: relative;
      float: right;
      padding-right: 400px;
      margin-left: 40px;
      height: 350px;
  }
  
  .slider img {
      position: absolute;
      max-width: 350px;
      height: auto;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      border-radius: 20px;
      top: 0;
      left: 0;
      z-index: 8;
  }
  </code></pre>
  
  <p>Mark-up:</p>
  
  <pre><code>&lt;div&gt;
      &lt;div class="slider"&gt;
          &lt;ul id="slider1"&gt;
              &lt;li&gt;&lt;img src="images/.../art-1.jpg" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="images/.../art-2.jpg" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="images/.../art-3.jpg" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="images/.../art-4.jpg" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="images/.../art-5.jpg" /&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
      &lt;div class="slider"&gt;
          &lt;ul id="slider2"&gt;
              &lt;li&gt;&lt;img src="images/.../bnl-1.jpg" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="images/.../bnl-2.jpg" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="images/.../bnl-3.jpg" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="images/.../bnl-4.jpg" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="images/.../bnl-5.jpg" /&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
       &lt;div class="slider"&gt;
          &lt;ul id="slider3"&gt;
              &lt;li&gt;&lt;img src="images/.../bge-1.jpg" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="images/.../bge-2.jpg" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="images/.../bge-3.jpg" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="images/.../bge-4.jpg" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="images/.../bge-5.jpg" /&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
       &lt;div class="slider"&gt;
          &lt;ul id="slider4"&gt;
              &lt;li&gt;&lt;img src="images/.../rtb-1.jpg" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="images/.../rtb-2.jpg" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="images/.../rtb-3.jpg" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="images/.../rtb-4.jpg" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="images/.../rtb-5.jpg" /&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>