obara
【jQuery】要素の数によってbxSliderの挙動を変更する
かなり初歩的な使い方な気がしますが、初めてこの書き方をしたので備忘録代わりにまとめました。
スライドさせる要素の数によって、bxSliderの動きを変える必要がありました。
今回したのはinfiniteLoopのオンオフですが、他のオプションを付加することも出来ます。
挙動的には
- 共通設定となる(infiniteLoopを設定していない状態)bxSliderを定義
- 要素の数によって挙動の出し分け
- bxSliderをリロードする
という順番になります。
実際のJSコードはこちらです。
// 共通の初期設定の配列 var defaultOpt = { speed: 900, minSlides: 3, maxSlides: 3, moveSlides: 1, slideWidth: 270, slideMargin: 15, pager: false, auto: true, pause: 4500, autoHover: true }; var slider = $('#slider').bxSlider(defaultOpt); // 上記で設定した内容でbxSliderを定義 if( slider.getSlideCount() < 4 ) { // スライダー3つ以下のとき defaultOpt['infiniteLoop'] = false; } else { // スライダー4つ以上のとき // prev/nextのリンクをクリックするとbxSliderのautoがfalseになってしまうので、再度autoをセットする $(document).on('click', 'a.bx-prev, a.bx-next', function(){ slider.startAuto(); }); }; // スライダーをリロードする slider.reloadSlider();
こうして設定をリロードするときのほかにも、
例えば、クリック時とロード時に同じ設定のJSを動かしたいとき(例:colorbox)などは、
この書き方なら最初に共通設定を最初に置いておけば、使いまわしができますね。
ひとつ勉強になりました!