自定义缩略图寻呼机影响页面上的所有滑块 - Bx-Slider v4答案

【问题标题】：Custom thumbnail pager affects all sliders on page - Bx-Slider v4自定义缩略图寻呼机影响页面上的所有滑块 - Bx-Slider v4
【发布时间】：2013-01-06 10:01:17
【问题描述】：

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

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

点击缩略图，看看两个滑块的变化。

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

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

【问题讨论】：

在我看来像是代码广告
什么是代码广告，@Joshua？这是 2 年前的一个真实问题。
布莱奇。我忘了检查日期。不知道为什么 2 年前的问题最终得到了审查。
是的，我完全忘记了这一点，直到有人试图在下面回答。

标签： jquery jquery-plugins custom-controls thumbnails bxslider

【解决方案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>

【讨论】：

这将是接近它的一种方式。但是，我需要一些更有活力的东西。我在上面发布了我的解决方案。真的很简单。

【解决方案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 年前提出这个解决方案时从未发布过实际答案。

【讨论】：