ちょっとディープな生物の世界

【jQuery】スライダープラグイン「slick」を導入する方法

ファイルをダウンロードする

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が動かない時の対処方法

次の2点を確認しましょう。

  • <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>

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です