【簡単】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設定では出来ないので以下記事をご参考ください。

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

Ads

関連記事

WordPress プログラミング

【簡単】WordPressでテーマ内のファイルURLを取得する方法

2022.04.13
75
Webツール プログラミング

chromeブラウザで更新したファイルのキャッシュ有効期間を調べる方法【htmlサイト】

2022.01.20
39
JavaScript

PACE.jsを使って簡単ローディング画面の作り方

更新日:2019.11.28
294
WordPress プログラミング

【wordpress.orgにログインできず、プラグインの新規追加・外部へ接続する際の通信がうまくいかない】原因・解決方法を紹介

2022.03.25
143