slickで「responsive」の設定が効かない

色々な使い方ができる slick 、とても便利でよく使わせてもらっています。

slickのオプションの「responsive」ですが、何故か設定が効かない状況がありましたので、備忘録です。

下記のように対応することで、正常に動作するようになりました。

変更前のコード
変更後のコード

変更前のコード

下記の場合、768px 以下で、スライドを4枚ずつから2枚ずつに変更したいのですが、768px以下でも4枚のままでした。



$('.slide1').slick({
	slidesToShow: 4,
	slidesToScroll: 4,
	responsive: &#91;
		{
			breakpoint:769,
			settings: {
				slidesToShow: 2,
				slidesToScroll: 2,
		},
	}],
});

$('.slide1').slick({

slidesToShow:4,

slidesToScroll:4,

responsive:[

{

breakpoint:769,

settings:{

slidesToShow:2,

slidesToScroll:2,

}],

});

変更後のコード

下記のように「respondTo: ‘slider’」を追加することで、今回の場合は、正常に動作するようになりました。



$('.slide1').slick({
	slidesToShow: 4,
	slidesToScroll: 4,
	responsive: &#91;
		{
			breakpoint:769,
			settings: {
				slidesToShow: 2,
				slidesToScroll: 2,
		},
	}],
	<strong><span class="marker-red">respondTo: 'slider'</span></strong>
});