レスポンシブにも対応!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.必要なファイルを読み込み
1 2 3 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="/js/jquery.bxslider.min.js"></script> <link href="/css/jquery.bxslider.css" rel="stylesheet" /> |
2.HTML
1 2 3 4 5 |
<ul class="bxslider"> <li><img src="/images/pic1.jpg" /></li> <li><img src="/images/pic2.jpg" /></li> <li><img src="/images/pic3.jpg" /></li> </ul> |
3.JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script type="text/javascript"> $(document).ready(function(){ slider = $(‘.bxslider’).bxSlider({ auto: true, speed: 400, pause: 5000, infiniteLoop: true, responsive: false, autoHover: true, onSlideAfter: function(){ slider.startAuto(); } }); }); </script> |
振り返って
もはや当然といえば当然かもしれませんが、IE7対応の敷居が結構高かったです。
今後しばらくはbxSliderを使っていくことになりそうです。