Written by Kasumi

【簡単】slickスライダーでデバイス事にオプションを切り替えよう【レスポンシブ設定を追加】

slickスライダーでスマホのデバイス幅の時、オプションを切り替える設定を追加したい。

複数のデバイス幅でオプションを切り替えたい。

本記事ではこのような悩みを解決します。

responsive設定をslickの実行関数内に加える

  $(function() {
    $(".product-slider").slick({
      slidesToShow: 2,
      responsive: [{
        breakpoint: 767,//切り替えたいデバイス幅を入れる
        settings: {
          slidesToShow: 1,
        }
      }],
    });
  });

デバイス幅事にオプションを切り替えたい場合はresponsiveプロパティをslickの実行関数内に加えます。

breakpointの設定値を任意のデバイス幅(px)に設定すれば完了です。

複数のデバイス幅で切り替えたい時

  $(function() {
    $(".slider").slick({
      slidesToShow: 2,
      responsive: [{
        breakpoint: 1024, //切り替えたいデバイス幅①
        settings: {
          slidesToShow: 1,
        }
      }, {
        breakpoint: 767,//切り替えたいデバイス幅②
        settings: {
          slidesToShow: 2,
          dots: true
        }
      }],
    });
  });

スマホ・タブレットなど複数のデバイスでslickのオプションを切り替えたい場合は上記のようにresponsive設定内にsettingsを追記すれば可能になります。

デバイス幅の大きい順になるように上から記述しましょう。(例:タブレット幅(1024)→スマホ(767))

以上の流れで実装できます。

まとめ

デバイス幅によってslickを実行する・しないで切り替えたい場合はresponsive設定では出来ないので以下記事をご参考ください。

以上で解説を終わります。

目次

関連記事

slick

【簡単】slickスライダーでサムネイルを連動・固定2列2段以上で表示させる方法

更新日:2022.11.25
3827
slick

【簡単】slickスライダーに画像が徐々に拡大されるズーム機能を導入しよう

更新日:2022.11.25
261
slick

【簡単】slickスライダーで一瞬縦並びになり崩れた表示になるのを対処する方法

更新日:2022.11.25
2741
slick

【jQuery】slickで現在のスライド番号と総数を表示する方法

更新日:2022.11.25
623