bxSlider実装まとめ

jQueryスライドショーライブラリ「bxSlider」の実装方法や細かな注意点、カスタマイズの方法などをまとめます。

bxSliderのウリ

  • 軽量、シンプルで使いやすい
  • 画像だけで無く、HTML要素もまとめてスライド可能
  • タッチデバイスのスワイプによる切り替えに対応
  • レスポンシブ(幅100%に拡縮)対応
  • IE8より動作
  • 各種オプションが充実、カスタマイズしやすい

ダウンロード、設置

本家サイトにアクセスし”Download”ボタンからデータをダウンロード。
jQueryも必要になるので、HTMLには下記のように読み込みを記述。

必要なファイル(ディレクトリ js/bxslider は任意):

HTMLの指定

関数の呼び出し

この場合’slider’のクラスを付けた要素の子要素がスライドするアイテムとなります。
※bxSlider-setting.js等と別ファイルにまとめておくと良いです。

オプションについて

バグ等の対処

前後ボタンやページングをクリック後、自動切替が効かなくなる場合の対処

呼び出した関数をオブジェクトに格納し、startAutoコマンドを時間差で実行させる、という仕組みです。

1ページ内に複数設置する場合

縦スライド版(vertical)設定時にうまく動かない時の対処

jquery.bxslider.js内の下記の箇所をfalseにします。

IE9以降で動かない時の確認事項

jQueryのバージョンは1.8.2以上になっているかを確認します。 http://wind-mill.co.jp/iwashiblog/2014/05/bxslider-ie-notwork/