スライドショーを作れるjQueryプラグインはいろいろあると思いますが、個人的には「slick.js」が一番使いやすいと思います。今回はいろんな「slick.js」のカスタマイズを紹介していきます。
「slick.js」をダウンロードする
slick公式サイトから必要ファイルをダウンロードしていきます。
「Download Now」よりファイルを読み込むか、下のCDNを貼り付けて導入していきます。
ダウンロードして導入する場合
「Download Now」をクリックするとzipファイルが読み込まれると思います。たくさんファイルが入っていますが、必要なものは2つで『slick/slick.css』『slick/slick.js』で大丈夫です。ほかファイルは入れなくても基本いけると思います。
CDNを利用して導入する場合
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<!-- JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>こちらをヘッドタグに配置してください。下のJSファイルに関してはbodyの中の一番下に置く場合などあると思いますので、適宜配置変更お願いします。
基本の使い方
See the Pen slick1 by Yushi nakagaki (@YUSHI-NAKAGAKI) on CodePen.
何も設定しなかった場合の表示イメージです。slickに関するコードは以下になります。
$('.slider-1').slick();これだけでは不格好なのでここからいろいろ追加していきましょう。
slickでいろんなスライドショーを作ろう
➀よくありそうなやつ（2枚表示）
See the Pen slick2 by Yushi nakagaki (@YUSHI-NAKAGAKI) on CodePen.
slidesToShow:2, で2枚表示するように設定しています。ここの数字をいじれば表示される枚数を変更できます。また autoplaySpeed:2000, で2秒でスライドさせ、 speed:500, でその動きのスピードをコントロールするイメージです。
➁スライドショーを常に動かし続ける場合
See the Pen slick3 by Yushi nakagaki (@YUSHI-NAKAGAKI) on CodePen.
ぬるっとスライドさせていくパターンです。 cssEase: ‘linear’, で挙動を変更し、autoplaySpeed:0, で常に動かし続け、speed:6000, でその動くスピードを調整しています。
速すぎるとみてて
まとめ
slickをカスタマイズすることでいろんなスライドショーが作れると思います。
これからも実務で使ったslickカスタマイズをこのページで更新していきます。
