jquery - 一页上有多个带有自定义控件的 bxslider

Question

我在一页上使用多个 bxslider 时遇到问题

当一个 slider 的 slider 数量多于另一个 slider 时， slider 数量较少的 slider 就会死掉。它不工作。我想要的是我的自定义控件仅对一个 slider 使用react。 这是我的 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>

这是我的jquery

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

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

});

我做了一个jsfiddle来更好地解释它

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

Answer 1

我自己发现了! 我不想打断 bxslider 的 css，所以我为每个 slider 添加了一个独特的类，如

<ul class="bxslider 1">

因为我的自定义控件是自动生成的，所以我无法向它们添加类，id 是使用 jquery 完成的

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

所以现在我的自定义控件看起来像这样

<div class='customcontrols custom1'>

这不是简单的链接

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

无论如何，谢谢!