高機能なJavaScriptの人気スライダープラグイン4つを実際に使ってレビューしてみた

こんにちは。LIGフィリピン支社代表のせいと（@seito_horiguchi）です。

僕のモットーは「ラクして作る」で、日々怠けながらコーディングをしています。その際に役立つのが、便利なライブラリやらプラグイン。おかげで毎日2〜3時間ほど昼寝に費やすことができています。

さて、今回は実際に僕が使ったことのあるJavaScriptのスライダープラグインで、特に人気の4つを勝手にレビューしてみます。導入を検討されている方は参考にしてみてください。

人気スライダープラグイン4選のレビュー

bxSlider

言わずと知れた汎用性の高いプラグイン。
ページャーやコントローラー、ループ、スマホ対応、コールバック関数など、基本的な機能は大体揃ってます。
タグ構造、optionの設定は比較的簡単。公式のドキュメントが充実していることに加え、実際に導入してみたというという日本語の記事も多いため、導入の敷居は低いと思われます。

ただし、レスポンシブとループ機能が少々扱いづらくて、要件によっては導入を断念するシーンがしばしばありました。
ループ機能は、カルーセル実装（複数枚同時に動かす場合）だとDOM生成のタイミングが一瞬遅れて、やや瞬途切れて見えてしまうことがあります。
また、レスポンシブ機能はカルーセルだと実装できませんでした。（本当はできるのかもしれませんが、少なくとも容易ではないと思います）
bxsliderにはこれまで何度もお世話になったんですが、この2つの機能がちゃんと実装できないのは厳しい。。。
また、有名とはいえGitHubでのissueの数が2015年4月現在で100件を超えているのは気になります。

flexslider2

こちらも汎用性の高いプラグイン。
bxSliderとほぼ同等の機能を兼ね揃えており、GitHub内の評価はbxSliderより高いです。ドキュメントも充実してる方かと。

ただ、bxslider同様にループ機能に少々難があります。
また、サポートブラウザが明記されてないのも悩ましいですが、僕が確認した感じではモダンブラウザではひととおり動作しました。
IE10以前、Android4.0以前はどうなるかわからないため、ちょっと手を出しづらいっす。

swiper

こちらはbxSliderやflexsliderよりもさらに高機能なプラグイン。スライド切り替えのアニメーションや、callback関数なども充実しています。
容量は大きいですが、GitHubでの評価は非常に高く、issueもかなり少なめです。
また、公式の情報だと色んな大手のプロダクト（AdobeやBMWなど）で使われているようなので、信頼性も高そうです。

しかし、現在のバージョン3.x.xでは、サポートはモダンブラウザのみ。
CSSではflexプロパティを使っているようですが、これが使えるブラウザはかなり限定的です。
ただし、バージョン2.x.xなら古いブラウザにも対応しているようです。（どこまで対応しているのかは明記されていませんが……）
バージョン2.x.xはGitHubの最下部からDLできます。

slick.js

slickは汎用性の高い機能に加えて、とりわけカルーセルのオプションが充実しています。
GitHubでの評価は、issueの数が2015年4月現在で100件超えなのは気になりますが、スターの数が10000を突破していて、圧倒的な人気を誇っています。
僕が知るかぎりでは、最もオススメできるプラグインです。

サポートブラウザは明記されていないようですが、大体のブラウザで動作することが確認できました。
ここまで機能が揃っていて、かつ安定しているカルーセルのプラグインって少ないように思えるので、重宝します。

まとめ

汎用性や安定といった面で言うなら、やはり一番におすすめできるのは「slick.js」です。bxsliderやflexsliderは有名ですが、一部機能に心配な点があるので使う際にはご注意ください。

スライダーはかなり実装頻度の高い機能ですが、どのプロダクトにも安定して使えるプラグインはなかなかないように思えます。

簡単なものなら自作したほうが早いですが、プラグインを選ぶ必要が出てきたら、ぜひこの記事が参考になればと思います。

LIGでは、エンジニアを絶賛募集中！

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。