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

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

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

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

変更前のコード

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

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

変更後のコード

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

$('.slide1').slick({
	slidesToShow: 4,
	slidesToScroll: 4,
	responsive: [
		{
			breakpoint:769,
			settings: {
				slidesToShow: 2,
				slidesToScroll: 2,
		},
	}],
	respondTo: 'slider'
});

今回の場合は、1ページに複数のslickを表示させたのが原因かもしれません。
上記で解決しないパターンもあるかもしれません。