ファイルをダウンロードする
「slick」のぺージからダウンロードしましょう。「get it now」から「Download」をクリックするとzipファイルを手に入れることができます。
ファイルの中で必要なのは、「slick.min.js」と「slick.css」です。適当な場所に保管してやりましょう。
slickだけでは動かないので、jQueryも導入することを忘れずに。
HTML内でlinkを作成する
src=””の値は、各自によって違うので、ちゃんとファイルのある場所を指定してあげてください。
cssはhead内に、javaScriptは</body>タグ直前に書いてあげましょう。
<head>
<link rel="stylesheet" type="text/css" href="css/slick.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/slick.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
</body>上手くいかない場合は、scriptタグを<body>の直前に書くことでちゃんと動く場合があります。
ダウンロードせずにCDNを利用する
CDNを利用する方法もあります。<head>内に次のlink、scriptタグを貼ってあげましょう。
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>実装してみる
スライドにしたい親要素にクラス名をつけます。ulでもdivでも何でも良いです。
<ul class="slick-slider">
<li><img alt="画像1" src="img.jpg" /></li>
<li><img alt="画像2" src="img.jpg" /></li>
<li><img alt="画像3" src="img.jpg" /></li>
</ul>JavaScriptにプログラムをコードしていきます。
$('.slick-slider').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
});それぞれのプロパティの値は、demoページを見ながら参考にしてください。
slickが動かない時の対処方法
次の２点を確認しましょう。
- <script>のsrcの指定場所が合っていますか？
- slickだけではなく、jQeuryも実装していますか？
たまに、slickだけ入れて安心してしまう場合があります。slickはあくまでjQueryのプラグインなので、jQuery本体がないと動きません。CDNでjQueryは簡単に実装することが可能です。
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
