jquerybxslider

Multiple bxsliders on one page with custom controls

i have a problem with multiple bxsliders on one page

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

<!-- slider 1 -->
<ul class="bxslider">
    <li>Slide 1</li>
    <li>Slide 2</li>
    <li>Slide 3</li>
</ul>

<!-- slider 2 -->    
<ul class="bxslider">
    <li>Slide 1</li>
    <li>Slide 2</li>
    <li>Slide 3</li>
    <li>Slide 4</li>
</ul>

<div class='customconrols'>
    <a data-slide-index="0" >0</a>
    <a data-slide-index="1" >1</a>
    <a data-slide-index="2" >2</a>
</div>

<div class='customconrols'>
    <a data-slide-index="0" >0</a>
    <a data-slide-index="1" >1</a>
    <a data-slide-index="2" >2</a>
    <a data-slide-index="3" >3</a>
</div>

here my jquery

jQuery(document).ready(function($){

$('.bxslider').bxSlider({
  pagerCustom: '.customconrols'
});

});

i have made a jsfiddle to explain it better

thanks! http://jsfiddle.net/VLpKK/

Solution

  • i found it out myself! i didn't want to interrupt with the css of bxslider so i added a unique class to each slider like 

    <ul class="bxslider 1">

    because my customcontrols where auto generated and i couldn't add a class to them id did it with jquery 

    $('.pictures').each(function(i,j) {
   $(this).addClass('custom'+(i+1));
});

    so now my customcontrols look like this 

    <div class='customcontrols custom1'>

    Than it was simple linking

    $('.1').bxSlider({
  pagerCustom: '.custom1'
});
  $('.2').bxSlider({
  pagerCustom: '.custom2'
});

    Thanks anyway!