【slick】リサイズすると横に流れ続けるスライダーが逆回転になるバグの解決方法

RELEASE / 2024.8.6 UPDATE / 2024.08.04

slick

useTransform

バグ

流れ続ける

逆回転

「slick」で横に流れ続けるスライダーを実装した際、画面をリサイズしたタイミングで流れる向きが逆回転してしまったり、流れるスピードが速くなったり遅くなったりして、最初の動きと変わってしまうことがあります。
この記事ではこのバグの原因と解決方法をご紹介したいと思います。

この記事の目次を表示

1 リサイズで横に流れ続けるスライダーが逆回転・スピードが変わるバグ
2 useTransformオプションをfalseにする
3 まとめ

リサイズで横に流れ続けるスライダーが逆回転・スピードが変わるバグ

まずはどんな現象か実際に見てみましょう。
「slick」を使って以下のように「slick」を作成した場合、ブラウザをリサイズするのをきっかけに逆回転したり、流れるスピードが速くなったり遅くなったりしてしまいます。

$(function(){
    $('.slider').slick({
        autoplay: true,
        autoplaySpeed: 0,
        speed: 5000,
        cssEase: "linear",
        slidesToShow: 4,
        swipe: false,
        arrows: false,
        pauseOnFocus: false,
        pauseOnHover: false,
    });
});

いろんなブログで紹介されている「slick」を使った横に流れ続けるスライダーのコードですね。

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

ぱっと見た感じ、いい感じに横に流れ続けていますが、
リサイズすると流れる向きが逆回転してしまったり、流れるスピードが速くなったり遅くなったりして指定した動きと変わってしまいます。

useTransformオプションをfalseにする

リサイズすると流れる向きが逆回転してしまったり、流れるスピードが速くなったり遅くなったりしてしまうバグの解決方法はオプションuseTransformの設定をfalseにするだけです。

useTransform: false

これを追加した「slick」のコードはこちら。

$(function(){
    $('.slider').slick({
        autoplay: true,
        autoplaySpeed: 0,
        speed: 5000,
        cssEase: "linear",
        slidesToShow: 4,
        swipe: false,
        arrows: false,
        pauseOnFocus: false,
        pauseOnHover: false,
        useTransform: false,
    });
});

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

どれだけリサイズしても流れる向きが逆回転したり、流れるスピードが速くなったり遅くなったりすることが無くなりましたね。

この指定はtransformの値が変換されるのを無効にするものです。
恐らく、リサイズすることでtransformの値が変更されてしまうので、リサイズすると流れる向きが逆回転したり、流れるスピードが速くなったり遅くなったりしてしまうようです。

useTransformの設定をfalseにすることで表示された時のtransformの値から変更されることがなくなるため、このバグが解消されます。

まとめ

いかがでしたか？
きっとuseTransform:trueだと便利なんだと思いますが、今回のように横に流れ続けるスライダーの場合は、逆にバグを発生させてしまうようです。
「slick」で横に流れるスライダーを実装する際は忘れずにuseTransformの設定をfalseにして無効にしておきましょう。