さくらのレンタルサーバ15周年!ロゴデザインコンテスト
さくらのレンタルサーバ15周年!ロゴデザインコンテスト
2015.04.27

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

せいと

swiper

sldr-swiper

公式 http://www.idangero.us/swiper/#.VSziSBOsXrU
GitHub https://github.com/nolimits4web/Swiper
容量 約61KB(圧縮データ)、jQuery版 約52KB(圧縮データ)
サポートブラウザ モダンブラウザ(公式情報)
おすすめ度 ★★★☆☆

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

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

slick.js

sldr-slick

公式 http://kenwheeler.github.io/slick/
GitHub https://github.com/kenwheeler/slick/
容量 約70KB(圧縮データ)、jQuery版 約36KB(圧縮データ)
サポートブラウザ Firefox, Chrome, Safari, iOS7~, Android4.2~, IE10~(著者確認)
おすすめ度 ★★★★☆

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

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

まとめ

汎用性や安定といった面で言うなら、やはり一番におすすめできるのは「slick.js」です。bxsliderやflexsliderは有名ですが、一部機能に心配な点があるので使う際にはご注意ください。
スライダーはかなり実装頻度の高い機能ですが、どのプロダクトにも安定して使えるプラグインはなかなかないように思えます。
簡単なものなら自作したほうが早いですが、プラグインを選ぶ必要が出てきたら、ぜひこの記事が参考になればと思います。

 


LIGでは、エンジニアを絶賛募集中!
https://liginc.co.jp/recruit/mid_career

  • 1
  • 2