【slick】レスポンシブ対応！ブレイクポイントでスライドの表示枚数を変える方法

slickでスライドの表示枚数をブレイクポイントで変更出来ない？

スライダーで、PCではスライドを3枚表示していたけど、スマホでは1枚にしたいといったケースがあると思います。

slickのオプションを使ってブレイクポイントを指定すれば、スライドの表示枚数を変えることが出来ます（ブレイクポイントは複数指定できます）。

今回は、コピペ可能なコードとサンプル（デモ）を使って解説していきます。

slickの基本的な使い方と、slickを使うのに必要なjQueryの使い方については以下の記事を参照下さい。

slickのブレイクポイントでスライドの表示枚数を変える方法【レスポンシブ対応】

slickのオプションでブレイクポイントを指定する事が出来ますが、そのブレイクポイントで設定出来るのは枚数だけではありません。

まずはスライドの表示枚数を変更する方法、次にスライドをフェードに変えてみたいと思います。

スライドの表示枚数をPCでは3枚、指定したブレイクポイントで1枚に変更

まずは完成形を見てみます。

See the Pen
slick（レスポンシブ） by junpei (@junpei-sugiyama)
on CodePen.

パソコンの場合は画面幅を狭くするか、左上のHTMLやCSSをクリックすれば、3枚から1枚になるのが確認出来ると思います。

jQueryのコード

HTMLとCSSは特に変わった点はないので、省略します。

jQueryの書き方はこちら。

$(function () {
  $(".slider").slick({
    arrows: false,
    autoplay: true,
    adaptiveHeight: true,
    dots: true,
    slidesToShow: 3,
    responsive: [
      {
        breakpoint: 400, // 399px以下のサイズに適用
        settings: {
        slidesToShow: 1,
        },
      },
    ],
  });
});

ポイントとなるのは2か所です。

slideToShow	表示するスライド数（初期値：1）
responsive	レスポンシブのブレイクポイントを設定してオプションを切り替える（初期値：none）

slideToShowは2か所にありますが、最初の3と設定しているのが基本となる表示枚数。

そして、responsive内のsettingsにある方が、設定したbreakpointより小さくなった時の表示枚数です。

ブレイクポイントは複数設定可能

先ほど設定したブレイクポイントは1ヵ所でしたが、以下のように複数設定することも可能です。

$(function () {
  $(".slider").slick({
    slidesToShow: 4,
    responsive: [
      {
        breakpoint: 1024, // 768〜1023px以下のサイズに適用
        settings: {
          slidesToShow: 3,
        },
      },
      {
        breakpoint: 768, // 480〜767px以下のサイズに適用
        settings: {
          slidesToShow: 2,
        },
      },
      {
        breakpoint: 480, // 〜479px以下のサイズに適用
        settings: {
          slidesToShow: 1,
        },
      },
    ],
  });
});

表示枚数以外も変更可能

先ほどのコードを、必要な箇所だけ切り取って見てみます。

$(function () {
  $(".slider").slick({
    slidesToShow: 3,
    responsive: [
      {
        breakpoint: 400, // 399px以下のサイズに適用
        settings: {
          slidesToShow: 1,
        },
      },
    ],
  });
});

このsettingsの中に、変更したいオプションを追記可能です。

変えられるのは表示枚数だけではないって事ですね。

試しに表示枚数だけでなく、スライドの種類をフェードになるように変更してみます。

するとこのようになります。

$(function () {
  $(".slider").slick({
    slidesToShow: 3,
    responsive: [
      {
        breakpoint: 400, // 399px以下のサイズに適用
        settings: {
          fade: true,
          slidesToShow: 1,
        },
      },
    ],
  });
});