こんにちは、今日はカルーセルを実行できるjQueryプラグイン、slickの使い方についてまとめていきます。
Table of Contents
公式サイト
https://kenwheeler.github.io/slick/
ダウンロード方法
公式サイトのヘッダーメニューにあるget it nowをクリックするとダウンロードリンクがある位置まで移動します。
そこにあるDownload Nowボタンを押下するとダウンロードが開始されます。
CSS
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
テーマを読み込む場合は以下も追記します。
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
JS
<script type="text/javascript" src="slick/slick.min.js"></script>
jQueryの読み込みを行なっていない場合はjQueryをダウンロードし同様に追記、または公式サイト同様にCDNを使用する場合は以下を追記します。
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
CDNを使用する場合
ファイルをダウンロードしてサーバーに配置する形ではなく、CDNを使用することもできます。
それぞれ以下のコードを自身のサイトに貼り付けます。
CSS
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
JS
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
使い方
公式サイトの[When complete, your HTML should look something like:]の部分にサンプルのコード全文があるため、ダウンロードしたslick本体の配置が適切に行えていればコードをコピーするのみで動作が確認できます。
必要な手順は主に以下の通りです。
- 必要なcssとjsファイルの読み込み
- カルーセル部分のHTMLコード
- 動作を開始するjsコード
