slick.jsのオプション設定をPC / モバイルで切り替える

「スライド（slick.js）のカスタマイズ」の補足でslick.jsのレスポンシブ設定について説明します。

レスポンシブ設定といっても『viewportに合わせたサイズで表示する』といった話ではなく、たとえばPCビューではドットを表示する、タブレット以下では表示しない、などのオプション切り替えの話です。（ビューポートに合わせた表示は最初から対応しています。）

追記：
slickjsの開発が止まっている＆世の中、脱jQuery！　で、実際の制作ではswiperが主流です。

INDEX

slick.jsのレスポンシブ設定
1. responsive設定は大から小へ
ウィンドウサイズを基準とするか、ブロックサイズを基準とするか
1. respondToオプション
slickjsに関する他の記事

slick.jsのレスポンシブ設定

slick.jsには、あらかじめレスポンシブ用のオプションが用意されているので、slickの「 responsive」オプションでbreakpointとsettingsを書き足すだけです。いたれりつくせりですね。

  // 見本
  $('.slide').slick({
    slidesToShow: 5,
    slidesToScroll: 3,
    responsive:[{
      breakpoint: 800,
      settings: {
        slidesToShow: 3,
        slideToScroll: 1
      }
    }, {
      breakpoint: 480,
      settings: {
        slideToShow: 1
      }
    }]
  });

responsive設定は大から小へ

responsiveオプションのbreakpoint値はmax-widthです。例の場合は800px以下ならスライドを3枚表示 & 1枚ずつスライド。480px以下なら1枚ずつ表示という設定となります。

ウィンドウサイズを基準とするか、ブロックサイズを基準とするか

あわせて覚えておくべきが「respondTo」オプションです。

・スライドを常に画面幅いっぱいで表示する・レスポンシブ設定を使用しない　ときは不要ですが、そうでなければ知っておく必要があります。

respondToオプション

respondToオプションの初期値は「window」なので、モニターサイズを基準にレスポンシブ設定を切り替えます。

respondToオプションで他に、

「slider」（スライダーの表示サイズ）
「min」（window sliderのいずれか小さい方）

を選択できます。

  // 見本２
  $('.slide').slick({
    slidesToShow: 5,
    slidesToScroll: 3,
    responsive:[{
      breakpoint: 800,
      settings: {
        slidesToShow: 3,
        slideToScroll: 1
      }
    }],
    respondTo: 'slider'
  });

見本２はrespondTo: ‘slider’なので、”実際の表示サイズが800px以下”になるとレスポンシブ設定が使用されます。