Zenn
😸

【jQuery】slickの導入方法・基本のスライダー

2022/08/28に公開
jQuery
メモ
tech

slickとは?

slickはjQueryベースの、スライダーを作成するためのプラグインです。
レスポンシブにも対応し、カスタマイズの幅も広く、世界的に利用されています。

導入方法

1) slickをダウンロード

まずは、slick公式サイトのget it nowからダウンロードします。

フォルダ内にZipファイルがダウンロードされます。

2) Zipファイルの解凍

Zipファイルを解凍し、「slick.css」と「slick.min.js」を選択します。

その2つを任意のCSS,JSファイルに入れまとめます。
「slick-theme」はスライダー下のドットを表示するのに必要なので表示させたい場合は同様にCSSファイルにまとめます。数字での表示で良い場合は必要ないです。

以後、「slick-theme」も一緒に記述しています。いらない場合は記述しなくて大丈夫です。

3) HTMLへの記述

スライダーをカスタマイズする際はslick.cssは触らずにstyle.cssで上書きし、JSも同様にscript.jsで動きを設定します。

/*---css---*/
<link rel="stylesheet" href="slick/slick.css">
<link rel="stylesheet" href="slick/slick-theme.css">
<link rel="stylesheet" href="css/style.css">

/*---js---*/
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/script.js"></script>

＊CDNを使う方法

CDN (Content Delivery Network:コンテンツデリバリーネットワーク）

外部ファイルをリンク1つで使用することができる仕組のことです。
サーバーの処理を分散させることで、負荷分散や通信速度の上昇を見込むことができます。

CDNも下記のようにheadタグの中に記述します。

/*---css---*/
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
<link rel="stylesheet" href="css/style.css">

/*---js---*/
<script src="https://code.jquery.com/jquery-3.6.0.min.js"integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script src="js/script.js"></script>

4) スライダーの実装

HTML
 <div class="visual">
     <div><img src="〇〇"></div>
     <div><img src="〇〇"></div>
     <div><img src="〇〇"></div>
     <div><img src="〇〇"></div>
 </div>
CSS
.visual {
  background-color: #9f9f9f;
  margin-bottom: 60px;
}
JS
$('.visual').slick({
  dots: true,
});


これで基本的なスライドショーの完成です。

參考文献

【jQuery】slickの初心者向け使い方【動かない】
slickの使い方からカスタマイズまで【スライダープラグイン決定版】
【初心者向け】slickの使い方と頻出のオプション【スライダーが簡単に】

Discussion