この記事の内容
・slick(スリック)について
・jQuery〜slickの導入方法まとめ
slick(スリック)とは？
スライドショーを簡単に表示させることができるプラグインです。
公式サイトはこちら。
導入方法
①jQueryを導入（CDN）
1 jsファイルを作成する
🗂 js #ディレクトリを新規作成
∟ 任意の名前.js #jsファイルを新規作成
2 jsファイル、jQueryを導入するためのコードを書く
bodyタグの閉じタグの直前に記述
.html
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="js/任意の名前.js"></script>
※jquery-3.6.0.min.jsというファイル名の3.6.0はjQueryのバージョンを指している。
②slickを導入
１ head内にslickのCDNを記述
.html
<head>
<!--省略 以下2行を追記-->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
</head>
2 body内にslickのCDNを記述
＊jQueryを読み込むことでslickが適用されるため、
jQuery（以下の記述）よりも下に記述します。（順番を間違えると動かないので注意）
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
.html
<body>
<!--省略-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!--以下１行を追記 jQueryよりも下に記述する-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script src="js/slider.js"></script>
</body>
③基本の記述
公式サイトでも記述方法が載っていてます。
こちらでは<div>タグで紹介していますが、一目でグループであると視認しやすいように<ul>タグ、<li>タグを使用します。
＊クラス名は任意の名前でOKです。
.html
<ul class="slider">
<li><img src="<!--画像URL-->"></li>
<li><img src="<!--画像URL-->"></li>
<li><img src="<!--画像URL-->"></li>
</ul>
基本的には以下の記述でスライダーが適用されます。
.js
$(function() {
$('.slider').slick();
});
自動再生や再生速度等のカスタマイズをするには・・
$('.slider').slick();の（）内に、{}を追加して、その中に記述していきます。
.js
$(function() {
$('.slider').slick({
//こちらに記述していく
});
});
参考
＊じゅんぺいブログさん カスタマイズの一覧を載せられているので、使いたいときにとても参考になります
【slick】カスタマイズ用オプションまとめ一覧
＊125naroomさん サンプル集がとても分かりやすくて、参考になります
【jQuery】スライダープラグイン「slick」実装サンプル集