LoginSignup
5
7

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-06-03

仕事柄、カルーセルスライダーをよく使うのですが、どれを使えば間違いないというのが、未だに決めかねている現状です。
というのも、どんな状況においてもこれがバッチリというスライダーは存在せず、どれも一長一短あるというのが、いろいろ使ってみてわかってきました。
ただ、こういう時はこれを使うというのが、ある程度自分の中でモヤっとあるので、それをまとめておこう。

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という感じですね。

5
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
7