【JavaScript】slickについて

jQueryのプラグインとは？

ライブラリとは様々な機能をパーツ化したものです。

よく使用されるjQueryのプラグインの種類

• スライドショー系（スライダー）
• スクロール系
• アニメーション系
• UI系

slick

王道のスライドショーライブラリです。

不具合も少なく、安定的に使えるのがslickプラグインです。

公式サイト

http://kenwheeler.github.io/slick/

代表的なオプション

1. スライドショーのアニメーションの時間を調整
2. レスポンシブに対応する
3. センターモードにする（真ん中のスライドを大きく見せる）
4. スライドの追加、削除機能
5. スワイプ対応

使用するための準備

以下ライブラリを読み込む

1. slick.css
2. jquery.min.js
3. slick.min.js

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

実装

必要最低限ではありますが実装に必要なコード記載しています。

※ライブラリの読み込み部分は省略してあります。

<div class="slide-items__wrap">
  <ul class="slide-items">
    <li class="slide-items__item">
      <img src="sample.png" alt="">
    </li>
    <li class="slide-items__item">
      <img src="sample.png" alt="">
    </li>
    <li class="slide-items__item">
      <img src="sample.png" alt="">
    </li>
  </ul>
</div>

$('.slide-items').slick();

オプションを使用してみます。

$('.slide-items').slick({
  autoplay: true, // スライド自動再生
  slidesToShow: 5, // 表示させるスライドの枚数
});