bxsliderで3個表示のリストを作る、スライドの数に応じてオプションを変える
bxsliderで全幅じゃないスライドを作るときのメモ。
いつも忘れてしまうので備忘録。
slideWidth、minSlides、maxSlides、moveSlidesが揃わないとちゃんと動かない。
こちら参考にさせてもらいました。
bxSliderの使い方と「オプション」によるカスタマイズ
あとはinfiniteLoopがtrueの場合、一枚の時でもスワイプできてしまうためCMSなどの時は枚数に応じて処理を変えたい時がある。
その場合はこのようにして処理を分ける
var defaultSetting = { infiniteLoop: true, }; var slider = $('.bxslider').bxSlider(defaultSetting); if(slider.getSlideCount() < 2) {//要素が1つだけだった場合 defaultSetting['infiniteLoop'] = false; } slider.reloadSlider();
解説:
まずオプションはdefaultSettingオブジェクトで持たせる
次にスライダー自身を宣言して引数にオプションを持たせてデフォルト指定しておく。
その上で、宣言した関数からgetSlideCountメソッドを使って条件判定
trueの場合はオブジェクトにアクセスして内容を書き換える
最後にreloadSliderメソッドで書き換えた(もしくはそのままの)slider関数を走らせる
とはいえ最近はめっきりslickかswiperばかり使っている。
特にレスポンシブのオプションが記述しやすい。