0

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

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

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

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

我在插件 github 页面上提出了一个新问题，但我想我会在这里发帖，因为我在 stackoverflow 上一直很幸运。

4

2 回答 2

0

这是因为您已经用一个类初始化了两个滑块。它应该用两个单独的类来完成，比如.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>
于 2015-01-07T09:47:53.813 回答
0

对于碰巧遇到此问题的任何人，这是我的实际答案。Codepen 示例在这里。

这是完成这项工作所需的 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 年前我提出这个解决方案时从未发布过实际答案。

于 2015-01-07T18:08:07.853 回答