title: Multiple bxsliders on one page with custom controls
body: <p>i have a problem with multiple bxsliders on one page</p>
  
  <p>when a slider has more slides than a different slider, die slider with less slides drops dead. its not working. what i want is that my custom controls only react on one slider. 
  this is my html</p>
  
  <p></p>
  
  <pre><code>&lt;!-- slider 1 --&gt;
  &lt;ul class="bxslider"&gt;
      &lt;li&gt;Slide 1&lt;/li&gt;
      &lt;li&gt;Slide 2&lt;/li&gt;
      &lt;li&gt;Slide 3&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;!-- slider 2 --&gt;    
  &lt;ul class="bxslider"&gt;
      &lt;li&gt;Slide 1&lt;/li&gt;
      &lt;li&gt;Slide 2&lt;/li&gt;
      &lt;li&gt;Slide 3&lt;/li&gt;
      &lt;li&gt;Slide 4&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div class='customconrols'&gt;
      &lt;a data-slide-index="0" &gt;0&lt;/a&gt;
      &lt;a data-slide-index="1" &gt;1&lt;/a&gt;
      &lt;a data-slide-index="2" &gt;2&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div class='customconrols'&gt;
      &lt;a data-slide-index="0" &gt;0&lt;/a&gt;
      &lt;a data-slide-index="1" &gt;1&lt;/a&gt;
      &lt;a data-slide-index="2" &gt;2&lt;/a&gt;
      &lt;a data-slide-index="3" &gt;3&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>here my jquery</p>
  
  <pre><code>jQuery(document).ready(function($){
  
  $('.bxslider').bxSlider({
    pagerCustom: '.customconrols'
  });
  </code></pre>
  
  <p>});</p>
  
  <p>i have made a jsfiddle to explain it better</p>
  
  <p>thanks!
  <a href="http://jsfiddle.net/VLpKK/" rel="nofollow">http://jsfiddle.net/VLpKK/</a></p>