Slickでclickイベントが動作しなかったりスライドが移動できないのは、全部こいつのせいでした

Flashムービーを置き換えるだけの簡単な仕事のはずが・・・

Flashムービー（swf）で作られていたスライドショーを今の環境でも動作するようにしてほしいという案件があって、単純なスライドショーだったので、お手軽に使えるjQueryのスライダープラグイン「Slick」で置き換えました。
（WordPressのプラグインではありません）

slick – the last carousel you’ll ever need
https://kenwheeler.github.io/slick/

元のスライドショーは「Skip」ボタンをクリックすると指定のスライドまでスキップできるようになっていました。
そこで、スライドショーでclickイベントが起きたら「slickGoTo」メソッドで指定のスライドに移動させれば良い　と単純に考えて下記のようにしてみたのですが、なぜかうまく動きません。

全く動作しないのではなく、動作したりしなかったりするのです。

$(function(){
    var LASTSLIDENUM = 20;
    var SLIDERSELECTOR = '#main .slider';
    // クリックで指定のスライドへ移動
    $(SLIDERSELECTOR).on('click', function(){
        $(this).slick('slickGoTo', LASTSLIDENUM);
    })
    // 指定のスライドで止める
    $(SLIDERSELECTOR).on('afterChange', function(event, slick, currentSlide) {
        if(currentSlide === LASTSLIDENUM) {
            $(this).slick('slickPause');
        }
    });
    $(SLIDERSELECTOR).slick({
        autoplay:true,
        autoplaySpeed:1000,
        speed: 1600,
        arrows: false,
        fade: true,
        cssEase: 'linear',
        lazyLoad: 'ondemand',
        pauseOnFocus: false,
        pauseOnHover: false,
        infinite: false
    })
});

原因はどこに？

最初はAutoplayの止め方が間違っていたり（infiniteオプションをfalseにしてもAutoplayは止まらない）、slickGotoとタイポしていたりしていたのですが、そういった問題をすべて潰してもうまく動きません。
clickイベントが捉えられていないのかと思いmousedownにしたりしてみたのですが、そういうわけではなくalertを仕込んだらちゃんと動作します。

最後には「Slickのバグなんじゃないか」なんて諦めかけていたんですが、なんのことはない、オプションのデフォルト値のせいでした。

そのオプションは「waitForAnimate」です。
これは、スライドアニメーションの最中にスライドを移動させるのを待たせるという設定で、デフォルトは「true」（アニメーション中はスライドの移動を待たせる）です。

多くの場合、スライドは止まっている時間が長く次のスライドへ移動する時間は短めに設定すると思います。
そのため、スライドが動いているタイミングでわざわざスライドを移動させようとはしません。

しかし今回は、元のFlashムービーの動きを踏襲することが前提でした。
元のムービーは、スライドがフェードで入れ替わります。
連続してゆっくり入れ替わっているので、止まっている時間はほんのわずか。
そのため、止まっているときを狙ってクリックしないと動作しないのです。

ちなみにデフォルトの設定とどれくらい動きが違っていたかというと、停止時間は3分の1、アニメーション時間は5倍以上となっています。

• 自動再生の停止時間（autoplaySpeed）：1000（デフォルト：3000）
• スライドのアニメーション時間（speed）：1600（デフォルト：300）

オプションのデフォルト値を再設定

というわけで、下記の設定を追加したらどのタイミングでクリックしても指定のスライドに移動するようになりました。

waitForAnimate: false;

Slickの設定について書かれているブログは多かったのですが、このオプションに詳しく触れている記事はほとんどありませんでした。
そもそもSlickでフェードを使う人は少ないようですので、このオプションを変える必要もないんですよね。
とはいえ、ちゃんと設定があるというのもSlickの良いところなのかもしれません。