bxSliderでループする画像スライドショーを実装する方法！
bxSliderでループする画像スライドショーを実装する方法について解説します。bxSliderでループする画像スライドショーを実装する方法はとても簡単で、とあるオプションを付けるだけで可能となります。またこれとよく用いるオプションについても紹介します。
bxSliderでループする画像スライドショーを実装したい
自動でループする画像スライドショーを実装したいという時、jQueryプラグインであるbxSliderを用いるととても簡単に実装することができます。
またbxSliderはオプションも多くあり、スライドショーのスピードを調節したり、スライドショーを繰り返し自動再生させたり、停止させたりすることもできます。
bxSliderのループする画像スライドショーの実装に加え、よく用いるオプションをサンプルコード付きで以下の項目で解説します。
bxSliderでループする画像スライドショーを実装する方法
bxSliderでループする画像スライドショーを実装する方法はとても簡単で、オプションにauto:trueとするだけです。
では実際にサンプルコードを用いて挙動を確認してみましょう。
このようにauto:trueとするだけで、スライドショーが自動再生されていることが分かります。
また1つ留意点として、prev,nextは消しておいた方がいいかもしれません。なぜなら連打するとバグを起こすからです。
このバグについては最後に紹介する記事で詳しく解説しています。
よく用いるオプション
ではこの自動再生されるスライダーとともに、よく用いるオプションを紹介します。
| mode | 画像のスライド方法の変更 |
| speed | 画像のスライド速度を指定(ms) |
| autoControls | "再生ボタン"、"一時停止ボタン"を表示 |
| pause | スライドが停止している時間を指定(ms) |
bxSliderにはこの他にも多くのオプションがあります。
オプションについては以下のサイトを参照してください。
ではここで1つオプションを用いたサンプルコードの挙動を確認してみましょう。
このようにオプションを用いることで、1つ目のサンプルコードに比べて少し異なっていることが分かります。
1つ注意点としてオプションを用いるとバグが発生しやすくなります。ここではその対処法としてオプションにuseCSS: falseを設定しています。
まとめ
いかがでしたでしょうか？
bxSliderを用いると簡単にループする画像スライドショーを実装できることが分かったと思います。
またここではbxSliderを用いることで良く発生するバグに対しても実は対策していました。
バグとその対処法については以下の記事で詳しく解説しているので、参照してください。
