bxSliderを自動再生させる方法をサンプルコード付き解説！

bxSliderはデフォルトだと自動再生しないで、ユーザーに矢印をクリックしてもらいスライドさせるという仕様になっています。

ただこれだともしも最初隠れてい画像で見せたい画像があったときにユーザーに見てもらえないという可能性があります。そこでbxSliderを自動再生させると、全ての画像を見てもらえる可能性が上がります。

bxSliderを自動再生させる方法はとても簡単ですので、以下の項目でbxSliderを自動再生させる方法を見ていきましょう。

ではbxSliderを自動再生させる方法について紹介します。

bxSliderを自動再生させるには、bxSliderのoptionsの1つであるautoをtrueにします。

今回は自動再生に加えてmodeをfadeにしています。ではサンプルコードで実際の挙動を確認してみましょう。

このようにスライドがフェードしつつ、自動再生されていることが分かります。

自動再生させるためのコードとしては普段bxSliderを用いる際のコードに、auto: trueを加えたのみです。

またbxSliderのオプションについて詳しく知りたい方は、以下のサイトの「
Configuration options」という項目を参照してください。

bxSliderでmodeをfadeとする際は必ず、クラス名をbxsliderとしてください。
そうしないとバグが発生してしまいます。

今回あえてバグが発生するサンプルコードを用意したので、挙動を確認してみましょう。

このようにclass名をsliderとすると1枚目と2枚目のスライド時にバグが発生していることが分かります。

ですので、bxSliderを使用する際はclass名をbxsliderとするようにしましょう。

いかがでしたでしょうか？

bxSliderを用いると、簡単に自動再生するスライドを作成することができるということが分かりました。

ぜひ今回紹介したような自動再生するスライドをbxSliderを用いて作成してみてください。