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

2014/08/29 更新

とある案件でカルーセル（スライドショー）を使うことになったので、これを機会に使いやすい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.必要なファイルを読み込み

<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

<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>

</ul>

3.JavaScript

<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>

$(document).ready(function(){

slider = $(‘.bxslider’).bxSlider({

auto: true,

speed: 400,

pause: 5000,

infiniteLoop: true,

responsive: false,

autoHover: true,

onSlideAfter: function(){

slider.startAuto();

}

});

</script>

Demo

振り返って

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

bxSlider 公式サイト