Slickでカルーセルをクリックしたらautoplayを止めたい

Question

Slickでカルーセルをクリックしたらautoplayを止めたい

Slickを使用してレスポンシブなスライダーを作っています。
スライダー下部に画像の枚数分付与されるカルーセル「●」をクリックした際に、
autoplayが止まるようにしたいです。
初期表示時はautoplayを実行し、カルーセルをクリックした時にのみautoplayが止まるイメージです。
ul.sliderにてslickのアウターを指定しています。

発生している問題

●正常（autoplayが止まる）
①safari、961px以上のchrome
②960px以下かつchromeで、一度autoplayが実行され、2枚目のスライドが表示された以降、カルーセルをクリック

●問題（autoplayが止まらない）
①960px以下かつchromeで、ローディングして画面初期表示直後にカルーセルをクリック
②windows版のchromeに限り、960px以下にウィンドウを縮めた状態で、正常①でautoplayを止めた後に別のウィンドウをアクティブにする

$('.slick-dots li').clickortouch(function(){
	$('.slider').slick('slickSetOption', 'autoplay', false, true);
});

該当のソースコード

$('.slider').slick({
	infinite: true,
	dots: true,
	slidesToShow: 1,
	centerMode: true, 
	centerPadding:'0',
	variableWidth: true,
	autoplay: true,
	autoplaySpeed: 3000,
	speed: 1000,
	responsive: [{
		breakpoint: 960,
		settings: {
			variableWidth: false,
		}
	}]
});

$('.slick-dots li').clickortouch(function(){
	$('.slider').slick('slickSetOption', 'autoplay', false, true);
});

最終的に試したこと

$('.slider').slick({
	infinite: true,
	dots: true,
	slidesToShow: 1,
	centerMode: true, 
	centerPadding:'0',
	variableWidth: true,
	autoplay: true,
	autoplaySpeed: 3000,
	speed: 1000,
	waitForAnimate: false
});

$(window).on('load resize', function() {
	var windowWidth = window.innerWidth;

	if (windowWidth < 960) {
		$('.slider').slick('slickSetOption', 'variableWidth', false, true);
	} else {
		$('.slider').slick('slickSetOption', 'variableWidth', true, true);
	}
});

var ua = navigator.userAgent;
if (ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) {
	$('.slick-dots li').clickortouch(function(){
		$('.slider').slick('slickSetOption', 'autoplay', false, true);
	});
} else {
	$(document).on('click', '.slick-dots li button', function() {
		$('.slider').slick('slickPause');
		$('.slider').slick('slickSetOption', 'autoplay', false, true);
	});
}

Answer 1

"slickSetOption"では止まりません。"slickPause"を使ってください。

$('.slider').slick('slickPause');

http://kenwheeler.github.io/slick/

var autoplay = true;
$(document).on('breakpoint', function(event, slick, breakpoint) {
  if (!autoplay) {
    $('.slider').slick('slickPause');
  }
});
$('.slick-dots li').click(function(){
  autoplay = false;
  $('.slider').slick('slickPause');
});

Comments

[Kuriii]

回答ありがとうございます。
試した結果、下記の場合にautoplayが止まりませんでした。

▼Chrome
　初期表示後に961px以上のウィンドウ幅でautoplayを止め、その後960px以下にウィンドウを縮小する

961px以上のウィンドウ幅では一時停止ができましたが、その状態のまま960px以下にウィンドウを縮小すると再びautoplayが動き出してしまいます。

960px以下のウィンドウ幅で初期表示後にautoplayを止めることは可能です。

一つ気になるのは、console.log($('.slider').slick('slickGetOption','autoplay'))で
最初のやり方だとautoplay : falseになりますが、ご教示いただいたやり方ではautoplay : trueのままです。

[x_x]

slickPauseは内部で動いているsetIntervalをクリアする唯一の方法なので変えられませんが、responsiveがあるとウィンドウ幅で初期化処理が走って再度有効にされてしまうようです。
対策を追記するので試してみてください。

[Kuriii]

再度ありがとうございます。このコードで解決しました。
breakpointイベントがあったんですね。

＞ responsiveがあるとウィンドウ幅で初期化処理が走って再度有効にされてしまうようです。
ということは、responsiveがあると、その幅に到達した際に初期化処理でsetIntervalが再設定されてしまうということですかね？

ChoromeでもAndroidでもSafariでも動いたので助かりました；；