Cherry Pie Web > ブログ > 技術記事 > Slickでclickイベントが動作しなかったりスライドが移動できないのは、全部こいつのせいでした

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

2019年5月7日

—

1 Flashムービーを置き換えるだけの簡単な仕事のはずが・・・
2 原因はどこに？
3 オプションのデフォルト値を再設定

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の良いところなのかもしれません。

この記事を書いた人

川井昌彦: FAシステムメーカー、国内最大手印刷会社製版部、印刷・ウェブ制作会社を経て、家庭の事情で実家に帰省して独立
現在はフリーランスと制作会社シニアディレクターのマルチワーク
ウェブ制作のほぼ全般を見渡せるディレクター業務が主だが、デザイン・コーディングも好き

1997年ブログ開設
WordPressコミュニティには2011年から参加
WordCamp Kansai 2016 セッションスピーカー
WordCamp Tokyo 2023 パネルディスカッションパネラー
WordBench京都、WordBench神戸、WordPress Meetup八王子など登壇多数