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

jqueryのロゴ
jQueryプラグイン「bxslider」がjQuery3系で動かない時の対処法
jQueryのbxsliderというスライドショープラグイン、とっても使い勝手がいいですよね。 僕もよくお世話になっています。 ...

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク