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

HTML/CSS

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

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

ビューポートに合わせた表示サイズは最初からできます。

スポンサーリンク

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

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

  見本
  $('.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のいずれか小さい方

を選択できます。

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

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

ミフネWEB
タイトルとURLをコピーしました