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

Question

我有一个问题，多个bxsliders在一个页面

当一个滑块比另一个滑块有更多的滑块时，滑块少的死滑块。不管用。我想要的是我的自定义控件只对一个滑动条起作用。这是我的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'
});

});

我做了一个简单的解释

谢谢!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'
});

谢谢!

Answer 2

在我的情况下，所有分页都有类bx-pager所有滑块的等级为slider-call滑块和分页都有一个父类iso-content

$('.slider-call').each(function (i,j) {
        let class_name='custom-slider'+(i+1)
        $(this).addClass(class_name);
        let parent=$(this).closest('.iso-content');
        let $child_pager=parent.children('.bx-pager')
        $($child_pager).attr('id',class_name)
        $('.'+class_name).bxSlider({
            pagerCustom: $($child_pager)
        });
    })

感谢回答@steinb