BETA

slickでafterChange内でslickGoToを使う場合の対処方法

投稿日:2018-10-24
最終更新:2018-10-24
※この記事は外部サイト(https://note.mu/oceant/n/n3d96eeadd57b)からのクロス投稿です

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

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

結論

オプションに waitForAnimate: false を指定しておく。

// 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を使う方が良い場面が多い気がします。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@oceant'の技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!