jqueryスライダー「slick.js」を滑らかに動かす方法とは？

slick.jsでスライドを滑らかに動かすオプション

「slick.js」には様々なオプションがあり、とても便利です。
今回はこのオプションの「autoplaySpeed」「cssEase」を使用してスライドを滑らかにしていきます。

実際にjsファイルに記述する場合は以下のように記述します。　＊class名が「slider」の場合

$(function() {
    $('.slider').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3,
        autoplay: true,
        autoplaySpeed: 0,　//隣あう画像のスライドするまでの間隔時間
        speed: 10000,
        arrows: false,
        pauseOnFocus: false,
        pauseOnHover: false,
        adaptiveHeight: true,
        cssEase: 'linear'//開始から終了まで一定に変化する
    });
    });

このままコピペして使用しても大丈夫ですが、理解は大切なので詳しく説明します。

オプション1:autoplaySpeed

これは、自動再生を有効にしたときに隣の画像が次にスライドするまでのびみょうな時間を設定できるオプションです。

デフォルトは3000（３秒）となっていますが、これを０にすると隣のスライドが０秒で動き始めるので結果滑らかになります。

オプション2:cssEase

これは、イージング（動きの加速度）の指定ができるオプションです。
デフォルトはeaseになっていますが、これを’linear’に変更します。
‘linear’は開始から終了まで一定に変化します。ですのでカクカクに動くことなくずっと一定に動いてくれるので滑らかな動きを実現できます。

以上で「slick.jsで滑らかにスライドさせる方法」をご紹介しました。参考にしてみてください。