色々な使い方ができる slick 、とても便利でよく使わせてもらっています。
slickのオプションの「responsive」ですが、何故か設定が効かない状況がありましたので、備忘録です。
下記のように対応することで、正常に動作するようになりました。
目次
変更前のコード
下記の場合、768px 以下で、スライドを4枚ずつから2枚ずつに変更したいのですが、768px以下でも4枚のままでした。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$('.slide1').slick({ slidesToShow: 4, slidesToScroll: 4, responsive: [ { breakpoint:769, settings: { slidesToShow: 2, slidesToScroll: 2, }, }], }); |
変更後のコード
下記のように「respondTo: ‘slider’」を追加することで、今回の場合は、正常に動作するようになりました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$('.slide1').slick({ slidesToShow: 4, slidesToScroll: 4, responsive: [ { breakpoint:769, settings: { slidesToShow: 2, slidesToScroll: 2, }, }], <strong><span class="marker-red">respondTo: 'slider'</span></strong> }); |
今回の場合は、1ページに複数のslickを表示させたのが原因かもしれません。
上記で解決しないパターンもあるかもしれません。
