【初心者向け】Slickをレスポンシブ対応にする方法

この記事は既にSlickを導入していて、レスポンシブ対応させるにはどうするかお悩みの方向けの記事です。Slickの導入方法についてはこちらをご覧ください。

基本のコード

Slickの導入方法についてご紹介した記事と同じHTML、Javascriptを用意します。
ご自分のウェブサイトに使用する場合は適宜class名など変更してください。

<div class="slick-slider">
    <div class="slick-item">1枚目</div>
    <div class="slick-item">2枚目</div>
    <div class="slick-item">3枚目</div>
    <div class="slick-item">4枚目</div>
    <div class="slick-item">5枚目</div>
</div>

$('.slick-slider').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
});

Slickをレスポンシブ対応にするには

Slickをレスポンシブ対応にするには、responsiveというオプションを追加し、breakpointを設定する必要があります。
下記コードを前述のjavascriptの代わりに使用すると、767px以下の時に表示されるスライドが1つだけになります。

$('.slick-slider').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    responsive: [{
        breakpoint: 767,
        settings: {
        slidesToShow: 1
        }
    }]
});

上記のコードでは、responsiveオプション内で767px以下の幅に対する設定を指定しています。この設定により、画面幅が767px以下になると、slidesToShowの値が1になり、1つのスライドずつ表示されるようになります。

コメントアウトで示しますとこのような状態です。

 $('.slick-slider').slick({
    infinite: true, // ループ再生 有効
    slidesToShow: 3, // 一度に表示するスライドの数 3
    slidesToScroll: 1, // 一度にスクロールするスライドの数 1
    responsive: [{ // レスポンシブ対応に関する記述
        breakpoint: 767, // ブレイクポイント 767px
        settings: { // その場合のオプション設定
        slidesToShow: 1, // 一度に表示するスライドの数 1
        // オプションを追加する場合はここ
        }
    }]
});

これでSlickスライダーをレスポンシブにすることができました！

デモ（1つのブレイクポイントを追加）

See the Pen
【初心者向け】slick3枚表示 by GROWORKS (@groworks)
on CodePen.

画面幅で表示が変わるため、右上のEDIT ON CODEPENをクリックし、ウインドウ一杯に表示させてから機能を確認してください。

【応用】Slickに複数のブレイクポイントを追加する

ブレイクポイントは1つで十分な場合もありますが、2つ以上、つまり複数のブレイクポイントが必要な場合もあるかと思います。その場合はこちらのコードをお試しください。

$('.slick-slider').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    responsive: [{
            breakpoint: 767,
            settings: {
                slidesToShow: 2,
                // オプションを追加する場合はここ
            }
        },
        {
            breakpoint: 500,
            settings: {
                slidesToShow: 1,
                // オプションを追加する場合はここ
            }
        },
    ]
});

上記のコードでは、767pxと500pxをブレイクポイントとしています。波かっこ{}を一塊としてブレイクポイントを追加できる、ということですね。
これでSlickに複数のブレイクポイントを追加することができました。

デモ（複数のブレイクポイントを追加）

See the Pen
【初心者向け】slickでbreakpointを複数追加 by GROWORKS (@groworks)
on CodePen.

前述のデモと同様、画面幅で表示が変わるため、右上のEDIT ON CODEPENをクリックし、ウインドウ一杯に表示させてから機能を確認してください。

まとめ

この記事では、Slickをレスポンシブ対応にさせる方法について詳しく説明しました。
Slickのresponsiveオプションを活用し、見やすいスライダーを作成していきましょう！