

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ベストアンサー
- 回答日時:
こんにちは
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
});
});
こちらがいらなかったようです。
きちんと機能するようになりました。
本当にありがとうございます!今後は作者様の情報を確認致します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ルパン
-
DOM要素を削除しても、イベント...
-
javascriptの基本的なことだと...
-
createElementした直後の要素の...
-
webページ上のTabキーの動き
-
functionから別のfunctionを実...
-
idを使わずにonclickで自身の要...
-
関数でy=g(x)のgとは何の略です...
-
-(ハイフン)_(アンダーバー)の...
-
クリックすると上に開くアコー...
-
同じIDで定義した要素の配列を...
-
ジェネレーターの作り方
-
javascriptで編集可能不可能の...
-
confirmの連続?
-
問題はbind の付いたリスナーを...
-
C#テキストボックスの文字を配...
-
ASP+アクセスでのSQLコメントに...
-
サンプルによく出てくるhogehog...
-
アンカーリンクをクリックさせ...
-
javascriptでiframeのURL変更は?
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavaScript window.openで開く...
-
Latexに関する質問です。
-
excle VBA とweb上の検索を利用...
-
マウスオーバー時の文字サイズ
-
投稿画像の確認画面
-
ラジオボタンでreadonlyの切替え
-
javascriptの基本的なことだと...
-
DOM要素を削除しても、イベント...
-
JavaScriptでセンター表示で行...
-
特定文字列を消したい
-
乗換案内 VBAで操作したい
-
リストボックスの条件
-
XMLでのAttributeを持ったNode...
-
javascriptのdocument.allにつ...
-
選択した部分を新しいウィンド...
-
TexでΣの添え字の位置直し
-
webページ上のTabキーの動き
-
JavaScriptでPOSTで自ウィンド...
-
showModalDialogで開いた画面を...
-
ダブルでコンボボックスについ...
おすすめ情報