jQueryのスライドショープラグイン「bxslider」について以前にも一度ブログを書いたことがあります。
改めて便利だなぁと思うjQueryプラグインの代表格で、プラグインの作者には感謝しかないです。
さて、Webサイトのスライドショーにも色々なタイプがありますが、最近個人的に実装する機会が多いのが、スライドショーの画像が自動でループし流れ続けるタイプのものです。
たとえば、上野にあるスペインバルの「ながおかや」さんのWEBサイトでも、画像が自動でループし流れ続けるスライドショーが複数の箇所で使用されています。
実は、このタイプのスライドショーも、jQueryプラグイン「bxslider」で実装できるのです！
真新しい機能ではなく、元々実装されていたようで、単純に僕が知らなかっただけなんですが、備忘録としてブログにしてみます！
jQueryプラグインbxsliderで画像が自動ループし続けるスライドショーの実装方法
早速jQueryプラグインbxsliderで画像が自動ループし続けるスライドショーの実装方法を紹介します！
といっても、方法はめちゃくちゃ簡単！
bxsliderには、様々なオプションが実装されています。
オプションの設定によって実に様々なスライドショーを実装することができます。
オプションの中に「ticker」というオプションがあるのですが、これをtrueに設定することで、jQueryプラグインbxsliderで画像が自動ループし続けるスライドショーを実装することができます！
$(".bxslider").bxSlider({
easing: 'easeOutBounce',
minSlides: 3,
maxSlides: 9,
slideWidth: 448,
slideMargin: 13,
ticker: true,//tickerオプション、デフォルトはfalse
speed: 65000,
});
tickerオプションはデフォルトではfalseになっているので、ここをtrueに指定。
これだけで基本的な画像が自動ループし続けるスライドショーの実装は完成です！
すごく簡単で、bxsliderの実力を思い知らされますよね！
まとめ
jQueryのプラグインbxsliderの画像が自動ループし続けるスライドショーを実装する方法についてお伝えいたしました！
本当に万能なjQueryプラグインで重宝するbxslider、まだまだ無限の可能性を秘めていそうです！
