カルーセルスライダーどれを使えば

More than 1 year has passed since last update.

仕事柄、カルーセルスライダーをよく使うのですが、どれを使えば間違いないというのが、未だに決めかねている現状です。

というのも、どんな状況においてもこれがバッチリというスライダーは存在せず、どれも一長一短あるというのが、いろいろ使ってみてわかってきました。

ただ、こういう時はこれを使うというのが、ある程度自分の中でモヤっとあるので、それをまとめておこう。


1.Bxslider

http://bxslider.com


メリット


  • 複数読み込み可能

  • レスポンシブ

  • 複数表示/スクロール数の調整可能

  • コールバックの処理がわかりやすい

  • 矢印画像の差し替えや配置の変更も容易

  • 参考となる情報ページが多い


デメリット


  • フルスクリーンのスライダーがめんどくさい

  • なぜか最後の画像が先頭の画像としてスライダーに表示される(バグ)

  • レスポンシブの挙動が不安定?(これは自分が使っている上では気にならなかった)


2.Slider Pro

http://bqworks.com/slider-pro/


メリット


  • フルスクリーン対応

  • レスポンシブ

  • サムネイル付きのスライダーが設置しやすい

  • というか、公式にあるような事やらせるなら結構容易(Macみたいだあ)


デメリット


  • 複数読み込みできない

  • 複数表示できない?(やり方わからん)

  • スライダーの画像数が2つだと、挙動がおかしい


3.slick

http://kenwheeler.github.io/slick/


メリット


  • 複数読み込み可能

  • レスポンシブ

  • 複数表示/スクロール数の調整可能

  • 挙動が安定している


デメリット


  • フルスクリーンのスライダーがめんどくさい

  • コールバックの処理がよくわからん

  • 矢印の画像変更とかが難しい

  • つーか参考になる情報ページがあまり豊富じゃない


だいたいこの3つを使う事が多いです。

使い分けとしては、

基本的にはbxslider、フルスクリーンの時はslider pro。

それら2つでどうにもならない時はslickという感じですね。