【jQuery】要素の数によってbxSliderの挙動を変更する

JavaScript

かなり初歩的な使い方な気がしますが、初めてこの書き方をしたので備忘録代わりにまとめました。

スライドさせる要素の数によって、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）などは、
この書き方なら最初に共通設定を最初に置いておけば、使いまわしができますね。
ひとつ勉強になりました！