レスポンシブにも対応！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.必要なファイルを読み込み
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="/js/jquery.bxslider.min.js"></script>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>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>
