jQueryプラグインbxsliderで画像が自動ループし続けるスライドショーを実装

jqueryのロゴ

https://arrown-blog.com/jquery-bxslider-error/

jQueryのスライドショープラグイン「bxslider」について以前にも一度ブログを書いたことがあります。
改めて便利だなぁと思うjQueryプラグインの代表格で、プラグインの作者には感謝しかないです。

さて、Webサイトのスライドショーにも色々なタイプがありますが、最近個人的に実装する機会が多いのが、スライドショーの画像が自動でループし流れ続けるタイプのものです。

http://www.uenodebal.com/

たとえば、上野にあるスペインバルの「ながおかや」さんのWEBサイトでも、画像が自動でループし流れ続けるスライドショーが複数の箇所で使用されています。
実は、このタイプのスライドショーも、jQueryプラグイン「bxslider」で実装できるのです!

真新しい機能ではなく、元々実装されていたようで、単純に僕が知らなかっただけなんですが、備忘録としてブログにしてみます!

jQueryプラグインbxsliderで画像が自動ループし続けるスライドショーの実装方法

早速jQueryプラグインbxsliderで画像が自動ループし続けるスライドショーの実装方法を紹介します!
といっても、方法はめちゃくちゃ簡単!

http://bxslider.com/options

bxsliderには、様々なオプションが実装されています。
オプションの設定によって実に様々なスライドショーを実装することができます。

オプションの中に「ticker」というオプションがあるのですが、これをtrueに設定することで、jQueryプラグインbxsliderで画像が自動ループし続けるスライドショーを実装することができます!

tickerオプションはデフォルトではfalseになっているので、ここをtrueに指定。
これだけで基本的な画像が自動ループし続けるスライドショーの実装は完成です!

すごく簡単で、bxsliderの実力を思い知らされますよね!

まとめ

jQueryのプラグインbxsliderの画像が自動ループし続けるスライドショーを実装する方法についてお伝えいたしました!

本当に万能なjQueryプラグインで重宝するbxslider、まだまだ無限の可能性を秘めていそうです!