jQueryのスライダー(カルーセル)プラグインを比較

前にbxSliderをイチオシとして書きました。
場合によっては上手く動いてくれないことがあるので、他のプラグインにすることも。
そこで3つのプラグインの特徴を比較してみる。

  1. bxSlider
  2. Cycle2
  3. carouFredSel

bxSlider

動きがシンプルで、カスタマイズしやすいプラグイン。RWDにも対応していてスゴく便利。大手企業も使ってる所がたくさんあるようでした。

スライドするオブジェクトの高さが違ってもadaptiveHeightで変更してくれます。
トランジションの種類が少なめです。’horizontal’, ‘vertical’, ‘fade’の3つしかありません。
カルーセルを最大最小の数を設定できます。いくつ分をスライドさせるかも’moveSlides’で設定可。
スライドの最後まで行った時に、矢印を消すオプションも用意されてます。(hideControlOnEnd)

独自のクラスが追加されていくので、専用のCSSをカスタマイズしていかないと、思わぬ表示の乱れにつながるので、多少注意が必要。

2つ設置して、1つをPagerにした場合には、多少制限があり。
ループ(infiniteLoop)の実装が難しい感じです。
最後のサムネイルまで到達した際に、右にスライドすると思いきや、左にスライドしていきます。
いろいろ試したけど、やっぱりできなかった。
というわけで、「bxSliderはページャーがサムネイルカルーセルの時は、ループ無しで。」という場合に使えそうです。

Cycle2

いつのまにかバージョンアップしてました。HTML5ベースになったのと、使用する機能によってファイルを分割したようです。
マニュアルがHTML5ベースの記述なので、JSに記述する場合は、キャメル形式に置き換えて読まないといけないのがちょっと面倒です。
こちらは、トランジションがかなり豊富ですが、カッコよくはないので使うのは限られてるかも。
動作はなかなか軽くカスタマイズが柔軟なので、複数設置の時には重宝します。
position:absoluteで動かすオブジェクトを配置しているようです。
slideActiveClassでアクティブ状態位のオブジェクトに、独自のCSSクラスをつけたところ、動作が不安定でした。設定しないでデフォルトのままのcycle-slide-activeだと問題なし。
2つ設置して、1つをPagerにした場合には、サムネイルクリックで、やっぱりループ処理が左にスライドしてしまう感じで惜しいです。

carouFredSel

3つの中では、一番カスタマイズが柔軟で、動きもいいです。複数設置する場合のsyncronizeがいい感じ。
Scroll・Next・Prevで別々の動作をしていできたり、heightの違うオブジェクトにも対応。もちろんRWDも。

全部の画像を読み込んでから、動作設定させる必要があります。(※UpdateSizeとconfiguration設定もある)
ローディングとかがないので、自分で実装しました。
onBeforeで設定してたアニメーション動作が、Prevで前のオブジェクトに戻った時に、アニメーション後の表示になっていた理由は不明。
onAfterだと上手くいくが、微妙にアニメーションの見た目が違うんですよね。
DevToolsで動きを確認してみたところ、どういう動きをしているかよくわからなかった。
WordPressプラグインは有料とのこと。
2つ設置して、1つをPagerにした場合には、syncronizeがあるためか、希望通りの動作をしてくれます。

まとめ

どれも特徴があるので、作る前にどんな動きをさせたいかを明確させておくのがいいです。
結局、自作した方が良い場合もありました。
手っ取り早く実装させるなら、bxSliderかcycle2がいいかも。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


five × five =