Question

我最近构建了一个站点，它按类名称在div上多次调用bx-slider。使用普通的寻呼机工作正常，但在使用带缩略图的自定义寻呼机时出错。看起来在打开“pagerCustom”选项的情况下导航滑块会影响页面上的所有滑块。

这是一个简化的测试用例供您查看：http://codepen.io/DavidVII/full/jhoIc

单击缩略图，查看两个滑块的变化情况。

如果您想分叉我的CodePen，请点击此链接：http://codepen.io/DavidVII/pen/jhoIc

我在插件github页面上发了一个新问题，但我想我会在这里发帖，因为我总是在stackoverflow上运气。

Answer 1

这是因为你已经用一个类初始化了两个滑块。应该使用两个单独的类来完成，例如.bxslider1和.bxslider2

<div class="container">
  <ul class="bxslider1">
    <li><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></li>
    <li><img src="http://bxslider.com/images/730_200/houses.jpg" /></li>
    <li><img src="http://bxslider.com/images/730_200/hill_fence.jpg" /></li>
  </ul>
  <ul class="bxslider2">
    <li><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></li>
    <li><img src="http://bxslider.com/images/730_200/houses.jpg" /></li>
    <li><img src="http://bxslider.com/images/730_200/hill_fence.jpg" /></li>
  </ul>
</div>
<script>
    $('.bxslider1').bxSlider();
    $('.bxslider2').bxSlider();
</script>

Answer 2

以下是碰巧碰到这个问题的人的实际答案。 Codepen示例here。

这需要JS来完成这项工作：

var sliderSets = $('.sliderWrap');

function initSliders(targetSlider, targetPager) {
  $(targetSlider).bxSlider({
    pagerCustom: targetPager
  });
}

$(sliderSets).each(function() {
  var targetSlider = "#" + $(this).children('.bxslider').attr('id');
  var targetPager = "#" + $(this).children('.bx-pager').attr('id');

  initSliders(targetSlider, targetPager);
});

我基本上使用目标CSS类循环遍历所有元素并在其上调用.bxSlider方法。

请注意，此代码来自2年前，因此BxSlider代码可能已更改。我正在回答这个问题，因为我在2年前提出这个解决方案时从未公布过实际答案。

自定义缩略图分页器会影响页面上的所有滑块 - Bx-Slider v4

2 个答案: