カスタムサムネイルページャは、ページ上のすべてのスライダに影響を与えます - Bxスライダv4 - jquery、jquery-plugins、カスタムコントロール、サムネイル、bxslider

私は最近bx-sliderを呼び出すサイトを構築しましたクラス名でdivに対して複数回。通常のページャーを使用すると問題なく動作しますが、サムネイルでカスタムページャーを使用するとエラーが発生します。 「pagerCustom」オプションをオンにしてスライダーをナビゲートすると、ページ上のすべてのスライダーが影響を受けるようです。

以下は、テストケースを削減したものです。 http://codepen.io/DavidVII/full/jhoIc

サムネイルをクリックして、両方のスライダーの変化を確認してください。

CodePenをフォークしたい場合は、こちらのリンクをご覧ください。 http://codepen.io/DavidVII/pen/jhoIc

プラグインのgithubページで新しい問題を作成しましたが、stackoverflowで常に運があったので、ここに投稿すると思いました。

回答：

これは、両方のスライダーを単一のクラスで初期化したためです。次のように、2つの別々のクラスで実行する必要があります .bxslider1 そして .bxslider2

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

これは偶然これに遭遇した人のための私の実際の答えです。コードペンの例 ここに.

これが、この作業を行うために必要な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年前にこのソリューションを思いついたとき、実際の答えを投稿したことがないので、私はこれに答えています。