bxsliderでpagerCustomのクラスがつくタイミングがおかしいです

bxsliderのpagerCustomで、クラスがつくタイミングが1つずれています。class="active"がつくとborder-bottomをつけるとしたかったのですが、1つずれてしまい困っております。

確認をしましたら、なぜか①、②、③の内③のpagerがクローンとして一番はじめに表示され、一番最後もクローンでできた①が表示され合計5つのpagerになってしまっています。
bxsliderを別のところにも使っているのでバグっているのでしょうか？
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider1').bxSlider({
infiniteLoop: true,
auto: true,
mode: 'fade'
});
});
</script>

<script type="text/javascript">
$(document).ready(function(){
$('.bxslider2').bxSlider({
infiniteLoop: true,
auto: true,
pagerCustom: '#bx-pager',
controls: false
});
});
//サムネイルのカールセル用
$(document).ready(function(){
$('.bxslider3').bxSlider({
pager:false,
minSlides: 1,
maxSlides: 1
});
});
</script>

ネットで検索をして、$(document).ready(function(){　を　$(window).load(function(){にするといいとか、autoをなくすを試しましたがだめでした。

宜しくお願いします。

No.1 ベストアンサー 回答者： fujillin 回答日時： 2016/10/24 16:03

こんにちは

pagerCustomって使ったことがないので、よくわかってませんが…


質問者様がどのように設置なさっているのかが不明なので、例えば、配布サイトでサンプルとして例示されているものをみてみると、
http://bxslider.com/examples/thumbnail-pager-1

＞クラスがつくタイミングが1つずれています。
ちゃんと、表示中のパネルと対応するサムネイルにactiveクラスが設定されているようですけれど？
data-slide-indexは0を開始番号としていますよね？

＞なぜか①、②、③の内③のpagerがクローンとして一番はじめに表示され、
＞一番最後もクローンでできた①が表示され合計5つのpagerになってしまっています。
事象から推測すると、pagerにもスライド機能を設定しているのでしょうか？
（ご提示のコードではpagerは#bx-pagerの要素だと思いますが、#bx-pagerに対してはスライダの設定は行っていないようですが…）

bxSliderでスライダの設定をすると、自動的に各要素の前後に要素のクローンを追加していると思われます。
これは、カルーセルなどでスライドを移動する際に、最初のスライドと最後のスライドを同時に表示しなければならない場合が生じるので、このようにしているものと推測します。
（コードを確認したわけではありませんが）そのような場合でも、クローンで作成されていると思いますので、data-slide-indexの値さえ保持できていれば、要素が5個になろうと問題は起きないはずと思いますけれど。
ただし、Optionの説明文にpagerCustomはdynamic carousels.には使えないというようなことは書いてあるみたいですが…

ついでながら…
＞ネットで検索をして～～
ライブラリに関する情報は、作者あるいは配布サイトにある説明が一番信頼できるし、情報量も豊富なはずです。
まずはそこで確認するようにしましょう。
http://bxslider.com/

この回答へのお礼

早速ありがとうございます。
作者様の情報を確認していなかったです。致命的なミスですね。
なんと、ご助言頂いた通り
//サムネイルのカールセル用
$(document).ready(function(){
$('.bxslider3').bxSlider({
pager:false,
minSlides: 1,
maxSlides: 1
});
});

こちらがいらなかったようです。
きちんと機能するようになりました。

本当にありがとうございます！今後は作者様の情報を確認致します。

お礼日時：2016/10/24 16:10