レスポンシブにも対応!jQueryカルーセル「bxSlider」が使いやすい


jQueryカルーセル「bxSlider」

とある案件でカルーセル(スライドショー)を使うことになったので、これを機会に使いやすいjQueryプラグインを探してみましたのでご紹介します。

まずはネットで口コミを見てまわり、評価の高そうなものの中から探してみました。
できればこの先しばらく使っていきたいという思いもあったので、いくつか条件を設けました。

  • レスポンシブ対応
  • スマホなどでのスワイプ操作対応
  • オプションをカスタマイズしやすい
  • IE7対応

Owl Carousel

いろいろ見ていく中で、最初に有力候補に上がったのが「Owl Carousel」でした。
上の条件にも当てはまり、CSS3 Transitionに対応したブラウザであれば、スライドだけでなく様々なエフェクトで見せることが可能です。
ただ、検証してみるとChromeとIE11でエフェクトが効きません。FirefoxやSafariではきちんと動作しているのに残念です。オフィシャルサイトにもユーザーから同様の書き込みがあるのですが、解決策が見つかりませんでした。
さらに、このタイミングでお客様から「スライドは無限ループにしてほしい」との要望も出てきて、それに対応していないOwl Carouselを断念しました。

Owl Carousel 2

次の有力候補が「Owl Carousel 2」。
Owl Carouselの次期バージョンで、まだベータ版ではありますが、無限ループも実装されており期待したのですが、IE7が動作対象外でした。

そしてたどり着いたbxSlider

そして最終的にたどり着いたのが「bxSlider」です。
希望の条件を満たしていました。IE7もサポートブラウザとして明記してあり、動作検証でも問題なく動きました。オプションも豊富で、無限ループはもちろん、あれば嬉しいと思っていた「オンマウス中はスライドを止める」ことも可能です!

組み込み自体はそう難しくありません。
が、ひとつ落とし穴がありました。「オンマウス中はスライドを止める」設定をすると(autoHover:true)、マウスアウトしても止まったまま自動再生がはじまりません…。
マウスアウトしたら自動再生を再開してほしいんですが…と思いつつ少しばかり改良したのが以下のソースです。

1.必要なファイルを読み込み

2.HTML

3.JavaScript

振り返って

もはや当然といえば当然かもしれませんが、IE7対応の敷居が結構高かったです。
今後しばらくはbxSliderを使っていくことになりそうです。

bxSlider 公式サイト