jQueryスライドショーライブラリ「bxSlider」の実装方法や細かな注意点、カスタマイズの方法などをまとめます。
bxSliderのウリ
- 軽量、シンプルで使いやすい
- 画像だけで無く、HTML要素もまとめてスライド可能
- タッチデバイスのスワイプによる切り替えに対応
- レスポンシブ（幅100%に拡縮）対応
- IE8より動作
- 各種オプションが充実、カスタマイズしやすい
ダウンロード、設置
本家サイトにアクセスし”Download”ボタンからデータをダウンロード。
jQueryも必要になるので、HTMLには下記のように読み込みを記述。
|
1 2 |
<script src="js/jquery.js"></script> <script src="js/bxslider/jquery.bxslider.min.js"></script> |
必要なファイル（ディレクトリ js/bxslider は任意）：
|
1 2 3 4 |
js/bxslider/images/bx_loader.gif js/bxslider/images/controls.png js/bxslider/jquery.bxslider.css js/bxslider/jquery.bxslider.js または jquery.bxslider.min.js |
HTMLの指定
|
1 2 3 4 5 6 7 |
<ul class="slider"> <li><img src="img01.jpg"></li> <li><img src="img02.jpg"></li> <li><img src="img03.jpg"></li> <li><img src="img04.jpg"></li> <li><img src="img05.jpg"></li> </ul> |
関数の呼び出し
|
1 2 3 4 5 |
<script> $(function(){ $('.slider').bxSlider(); }); </script> |
この場合’slider’のクラスを付けた要素の子要素がスライドするアイテムとなります。
※bxSlider-setting.js等と別ファイルにまとめておくと良いです。
オプションについて
バグ等の対処
前後ボタンやページングをクリック後、自動切替が効かなくなる場合の対処
呼び出した関数をオブジェクトに格納し、startAutoコマンドを時間差で実行させる、という仕組みです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
var timeout_id; var slider; $(function(){ slider = $('.slider').bxSlider({ onSliderLoad: function () { timeout_id = setTimeout(function(){} , 1000); }, onSlideAfter: function () { timeout_id = setTimeout(TimeoutFunc , 1000); }, }); function TimeoutFunc(){ slider.startAuto(); }; }); |
1ページ内に複数設置する場合
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
var timeout_id1; var slider1; $(function(){ slider1 = $('.slider1').bxSlider({ onSliderLoad: function () { timeout_id1 = setTimeout(function(){} , 1000); }, onSlideAfter: function () { timeout_id1 = setTimeout(TimeoutFunc1 , 1000); }, }); function TimeoutFunc1(){ slider1.startAuto(); }; }); var timeout_id2; var slider2; $(function(){ slider2 = $('.slider2').bxSlider({ onSliderLoad: function () { timeout_id2 = setTimeout(function(){} , 000); }, onSlideAfter: function () { timeout_id2 = setTimeout(TimeoutFunc2 , 000); }, }); function TimeoutFunc2(){ slider2.startAuto(); }; }); |
縦スライド版（vertical）設定時にうまく動かない時の対処
jquery.bxslider.js内の下記の箇所をfalseにします。
|
1 2 3 |
if (slider.settings.mode == 'vertical') slider.settings.adaptiveHeight = true; ↓ if (slider.settings.mode == 'vertical') slider.settings.adaptiveHeight = false; |
IE9以降で動かない時の確認事項
jQueryのバージョンは1.8.2以上になっているかを確認します。 http://wind-mill.co.jp/iwashiblog/2014/05/bxslider-ie-notwork/
