【jQuery】 slick カルーセルスライダーを使ってみる

Pocket

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-11-10-14-50


%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-11-10-12-46

システム部の渡辺です。

設定が楽で使い回せるスライダーを探してました。

レスポンシブ対応が細かくできて、
自前で何かを書き足さなくてもすむスライダーの候補として
slick.js はけっこういいです。

slick 公式

サンプル

よく使うスライダーの代表例のサンプルを作成してみました。

レスポンシブ対応

最近の案件はほぼレスポンシブなので、
PC、タブレット、スマホの設定を、わかりやすく簡単に設定できるかがポイントだと思いますが、例えば「768px 以下になった時には2列に変更」などといった指定を複数できる setting が用意されてあり、重宝しそうです。


$('.slick-3').slick({
  responsive: [
    {
      breakpoint: 959,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
      }
    },
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2,
      }
    },
    {
      breakpoint: 470,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
      }
    }
  ]
});

その他

タブ切り替え機能を、用意されている setting ですぐできます。( asNavFor )

スライドさせる列に、div などではなく、いきなり img 要素を指定すると、妙な動きがある気がするので、 div の方がよさそう。どうせだから .slick-slide というデフォクラス名つけておくとロード時の崩れ防止になる様子。