【jQuery】スライダープラグイン slick 導入方法【スライドショー】 #jQuery

この記事の内容

・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」実装サンプル集