slickのafterChangeイベント内でslickGoToを使う場合の対処方法

普通にやるとうまく動作しないので、その対処方法です。いわゆるバッドノウハウ。

6枚くらいスライドがあって、初回以外は最後の3つだけ繰り返したい、といったときに使えます。

結論

オプションに waitForAnimate: false を指定しておく。もしくはsetTimeoutでタイミングをずらす。

// 1．waitForAnimate: falseとする場合
$('#slides').slick({
    autoplay: true,
    speed: 2000,
    autoplaySpeed: 3000,
    pauseOnFocus: false,
    pauseOnHover: false,
    waitForAnimate: false
}).on('afterChange', function(event, slick, currentSlide){
    if (currentSlide === 5) {
        slick.slickGoTo(3);
    }
});

// 2．setTimeoutでタイミングをずらす場合
$('#slides').slick({
    autoplay: true,
    speed: 2000,
    autoplaySpeed: 3000,
    pauseOnFocus: false,
    pauseOnHover: false
}).on('afterChange', function(event, slick, currentSlide){
    if (currentSlide === 5) {
        setTimeout(function(){
            slick.slickGoTo(3);
        }, 3000);
    }
});

原因

waitForAnimationがtrueの状態（デフォルト）だとアニメーション中にはスライド移動できなくなります。
おそらくafterChangeが発生するタイミングは切り替わりのアニメーションがちょうど終わるときなのでしょう。微妙なタイミングではありますが、その時点ではまだアニメーション中だという判定になってしまっているようで、slickGoToが無視されてしまうようです。slickGoToだけでなく、slickPrevやslickNextも同様ですね。

2種類の対応方法を挙げましたが、前者だとアニメーションの切り替わり直後にslickGoToが実行されてしまうので、後者のようにsetTimeoutを使う方が良い場面が多い気がします。