【jQuery】slickでいろんなスライドショーを作ろう！

こんにちは！コーダーのゆうしです。

スライドショーを実装できるjQueryプラグインはいくつかありますが、個人的に一番使いやすいと感じているのが slick.js です。導入が簡単で、オプションが豊富なので複雑なスライドショーもシンプルなコードで作れます。この記事ではslick.jsの導入方法から基本の使い方、よく使うオプションまでまとめて解説します。

slick.jsを導入する
基本の使い方
よく使うオプション一覧
カスタマイズ例
躓きやすいポイント
まとめ

slick.jsを導入する

ダウンロードして使う場合

slick公式サイトの「Download Now」からZIPファイルをダウンロードします。解凍すると複数のファイルが入っていますが、必要なのは以下の2つだけです。

slick/slick.css
slick/slick.js

CDNを使う場合

ファイルをダウンロードせずにCDNで読み込む方法もあります。<head> 内にCSSを、</body> 直前にJSを配置してください。

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>

<!-- jQuery（読み込み済みの場合は不要） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<!-- slick.js -->
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

最新のCDNは公式サイトでご確認ください。

基本の使い方

表示イメージ

See the Pen slick1 by Yushi nakagaki (@YUSHI-NAKAGAKI) on CodePen.

何も設定しなかった場合の表示イメージです。slickに関するコードは以下になります。

$('.slider-1').slick();

オプションを何も指定しない場合はこのようなシンプルなスライドショーになります。ここからオプションを追加してカスタマイズしていきます。

よく使うオプション一覧

slick.jsのオプションをまとめました。実務でよく使うものを中心に紹介します。

オプション	初期値	内容
slidesToShow	1	一度に表示するスライド枚数
slidesToScroll	1	一度にスクロールするスライド枚数
autoplay	false	自動再生のON/OFF
autoplaySpeed	3000	自動再生の間隔（ミリ秒）
speed	300	スライドアニメーションの速さ（ミリ秒）
cssEase	‘ease’	スライドのイージング
dots	false	ドットナビゲーションの表示
arrows	true	矢印ナビゲーションの表示
infinite	true	無限ループのON/OFF
pauseOnHover	true	ホバー時に自動再生を一時停止
responsive	–	ブレイクポイントごとの設定

カスタマイズ例

① 2枚表示のスライドショー

See the Pen slick2 by Yushi nakagaki (@YUSHI-NAKAGAKI) on CodePen.

実装コード

$('.slider').slick({
  slidesToShow: 2,     // 2枚表示
  autoplay: true,      // 自動再生ON
  autoplaySpeed: 2000, // 2秒間隔
  speed: 500,          // アニメーション0.5秒
  dots: true,          // ドット表示
});

slidesToShow の数値を変えれば3枚・4枚表示にも対応できます。autoplaySpeed でスライドの間隔、speed でアニメーションの速さを別々にコントロールできるのがポイントです。

② 常に流れ続けるスライドショー（無限ループ）

See the Pen slick3 by Yushi nakagaki (@YUSHI-NAKAGAKI) on CodePen.

実装コード

$('.slider').slick({
  autoplay: true,
  autoplaySpeed: 0,      // 停止なし
  speed: 6000,           // ゆっくり動かす
  cssEase: 'linear',     // 一定速度で動かす
  slidesToShow: 3,
  arrows: false,         // 矢印非表示
  dots: false,           // ドット非表示
  pauseOnHover: false,   // ホバーでも止まらない
});

cssEase: 'linear' で一定速度にして、autoplaySpeed: 0 で止まらずに流れ続ける設定です。ロゴ一覧やクライアント実績の表示によく使います。pauseOnHover: false を忘れるとホバー時に止まってしまうので注意してください。

③ レスポンシブ対応

$('.slider').slick({
  slidesToShow: 3,
  responsive: [
    {
      breakpoint: 768, // 768px以下
      settings: {
        slidesToShow: 1,
      }
    },
    {
      breakpoint: 1024, // 1024px以下
      settings: {
        slidesToShow: 2,
      }
    }
  ]
});

responsive を使うことでブレイクポイントごとに表示枚数などを変更できます。PCは3枚表示、タブレットは2枚、スマホは1枚といった対応が簡単に実装できます。