「slick.js」を滑らかに動かす方法を解説。jqueryスライダーを完璧に！

みなさんこんにちは！ワトスンです。
今回は、、
「slick.jsを使用してスライダーを実装したいが、スライドが滑らかに流れない。。カクつかずに滑らかに流れすにはどうすればいいの？」
という疑問に答えます。

slick.jsを滑らかに動かした例

実際にslick.jsを使用して複数の画像を滑らかにスライドさせた状態をお見せします。
デモサイト
このように滑らかにスライドさせていきます。

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

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

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

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

オプション1:autoplaySpeed

これは、自動再生を有効にしたときに隣の画像が次にスライドするまでのびみょうな時間を設定できるオプションです。
デフォルトは3000（３秒）となっていますが、これを０にすると隣のスライドが０秒で動き始めるので結果滑らかになります。

オプション2:cssEase

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

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