【簡単】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設定では出来ないので以下記事をご参考ください。
以上で解説を終わります。
目次