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

記事が少しでもいいなと思ったらクラップを送ってみよう!
36
+1
@oceant'の技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする