[jQuery] レスポンシブ対応のカルーセルは「slick」が使いやすかった

Googleがいよいよモバイル対応の有無をランキングに反映するぞ！ってことでレスポンシブがわーわーと言われておりますが、さて置いておいて、省スペースでいろんなコンテンツを詰め込めるカルーセルのお話です。 弊社のサイトはレスポンシブで組んでおりますので、カルーセルを導入しようとすると、レスポンシブに対応せざるを得ません。 ども、フロントエンド担当の阿部です。 ちなみに、「カルーセル」は回転木馬の意味らしく、くるくると巡回する表現ってコトなんですかね？　カルーセル麻紀さんがいちいち頭をよぎるのを何とかしたいものです。

レスポンシブ対応で使いやすいカルーセル

で、いろいろと調べたところ「slick」が目的と合致しましたのでご紹介。 プラグインの導入に関しては コリス様が詳しく。 僕が欲しかったカルーセルの要件は

• レスポンシブ
• スワイプで動く

このくらいです。とはいえ「slick」はかなり高性能なのでこだわった表示のさせ方も出来ますね。 少ないスペースにコンテンツを詰め込めるので「タブ」と同じく効果的に使えばモバイルでも見やすさとコンテンツ量を同居させられて素敵。 リポジトリがgitにありますので適当にクローンしたり、Bowerで引っ張ってきたり。 kenwheeler/slick CDN版が用意されているので、headerに読み込むだけでスタンバイなのはありがたいですね。 demoのページにレスポンシブ用のコードが載っているので、まるっと参照すると

$('.responsive').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});

こんな感じで、ブレイクポイント毎に表示させたい数を表記すればOK、細かく調整できて素晴らしいですね。 今後とりあえずカルーセル実装の歳には「slick」を使っていこうと思います。 それでは、また。 slick – the last carousel you'll ever need