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>

这里是我的jquery

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

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

}）;

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

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

Answer 1

我自己发现了！我不想用bxslider的CSS中断，所以我为每个滑块添加了一个独特的类，如

<ul class="bxslider 1">

因为我的自定义控件在自动生成的地方，我无法为它们添加一个类，所以使用jquery

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

所以现在我的customcontrols看起来像这样

<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

一个页面上有多个bxsliders，带有自定义控件

2 个答案: