

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ランキング
-
Latexに関する質問です。
-
ダブルでコンボボックスについ...
-
【Jquery】changeイベント毎にa...
-
idを使わずにonclickで自身の要...
-
アコーディオンメニューの高さ...
-
毎日日付の変わるタイミングを...
-
カウントダウンJSにタイマーは...
-
JAVAスクリプトで指定時間以降...
-
javascript 特定のタグのidの存...
-
Matlabで自作関数をオーバーロード
-
javascriptで文字挿入でtoggle...
-
関数でy=g(x)のgとは何の略です...
-
DelphiのInputQueryで整数値を...
-
C#で、ContextMenuStripに動的...
-
Vb.netのグローバル変数の宣言...
-
ASP.NET MVCでObjectをjsに渡す
-
関数の中の値を取り出したい
-
while文について
-
functionから別のfunctionを実...
-
Linux バイナリ実行できない "...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavaScript window.openで開く...
-
Latexに関する質問です。
-
excle VBA とweb上の検索を利用...
-
マウスオーバー時の文字サイズ
-
ラジオボタンでreadonlyの切替え
-
投稿画像の確認画面
-
javascriptの基本的なことだと...
-
DOM要素を削除しても、イベント...
-
特定文字列を消したい
-
JavaScriptでセンター表示で行...
-
リストボックスの条件
-
乗換案内 VBAで操作したい
-
XMLでのAttributeを持ったNode...
-
javascriptのdocument.allにつ...
-
選択した部分を新しいウィンド...
-
ダブルでコンボボックスについ...
-
TexでΣの添え字の位置直し
-
webページ上のTabキーの動き
-
IE6.0でのオブジェクト座標の動...
-
JavaScriptでPOSTで自ウィンド...
おすすめ情報