プログラミング

「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(3秒)となっていますが、これを0にすると隣のスライドが0秒で動き始めるので結果滑らかになります。

オプション2:cssEase

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

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

2 件の投稿

    • 失礼致しました。改善させて頂きました。デモサイトのトップがslick.jsの例です!

関連記事