Web事業部実績紹介
Web事業部実績紹介
2015.04.27

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

せいと

こんにちは。フロントエンドエンジニアのせいとです。

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

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

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

bxSlider

sldr-bx

公式 http://bxslider.com/
GitHub https://github.com/stevenwanderski/bxslider-4
容量 約22KB(圧縮データ)
サポートブラウザ Firefox, Chrome, Safari, iOS, Android, IE7+(公式情報)
おすすめ度 ★★★☆☆

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

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

flexslider2

sldr-flex

公式 http://flexslider.woothemes.com/
GitHub https://github.com/woothemes/FlexSlider
容量 約21KB(圧縮データ)
サポートブラウザ Firefox, Chrome, Safari, iOS7~, Android 4.2~, IE11~(著者確認)
おすすめ度 ★★☆☆☆

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

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

  • 1
  • 2