Webサイトにカルーセルを導入する方法｜jQueryの「slick」で手軽に実装！

はじめに

こんにちは！スタッフのやまさきです。

Webサイトに「カルーセル」（スライドショー）を取り入れることで、見せたい情報をコンパクトにまとめたり、視覚的なインパクトを高めたりすることができます。

↓使って制作したサイトはこちらから　※現在は別のプラグインを使用しています

島根県出雲市でシステム開発・導入の相談なら三島笑会

島根県出雲市でシステム開発や導入のご相談なら「三島笑会」へ。出雲市を拠点に、システム開発・保守、WEB制作支援、WEB決済システム導入サポートなどのサービスをご提供しています。まずはご相談ください。

カルーセルにはさまざまな実装方法がありますが、今回はjQueryの人気ライブラリ「slick」を使った方法をご紹介します。

カルーセルの実装方法はいろいろ

カルーセルの実装方法には、以下のようにいくつかのパターンがあります。

CSSとJavaScriptだけでシンプルに実装する方法
モダンなフレームワーク（Reactなど）を使う方法
Swiper や Flickity などのJavaScriptライブラリを利用する方法
jQueryプラグインを使う方法（今回はこれ）

今回は、手軽に比較的シンプルで導入しやすいjQueryベースの「slick」を選びました。

slickとは

slick は、jQueryベースのカルーセルライブラリで、以下のような特徴があります。

スライド数や切り替えアニメーションの制御が容易
レスポンシブ対応（スマホ表示にも柔軟）
自動再生（autoplay）、ナビゲーション（矢印やドット）など
簡単なカスタマイズオプションがある

実装手順

以下のような流れで導入できます。

1. jQueryとslickの読み込み

まず、HTMLに以下を記述します。

<head>内に記述

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.css">

</body>直前に記述

<!-- jQuery -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

2. HTML構造を作成

画像にはリンクを貼り、画像の下にテキストを表示させました。

<div class="slider">
  <div><a href="リンク1"><img src="image1.jpg" alt="スライド1"></a><p>テキスト1</p></div>
  <div><a href="リンク2"><img src="image2.jpg" alt="スライド2"></a><p>テキスト2</p></div>
  <div><a href="リンク3"><img src="image3.jpg" alt="スライド3"></a><p>テキスト3</p></div>
</div>

3. jQueryでslickを初期化

/bodyの直前（上記のCDNの次）に記述

<script>
  $('.slider').slick({
    infinite: true,
    centerMode: true,
    centerPadding: '15%',
    autoplay: true,
    dots: true,
    speed: 500,
  });
</script>

【参考】slickのパラメータと値について

$('.slider').slick({
  accessibility: true,          // キーボード操作を有効にする（Tabキー、矢印キー）
  dots: false,                  // ドットナビゲーションの表示・非表示
  dotsClass: 'dot-class',       // ドットに任意のクラス名を付与
  draggable: true,              // ドラッグ操作の有効化（PC）
  fade: false,                  // フェードアニメーション切り替え（trueでON）
  arrows: true,                 // 左右の矢印ナビゲーションを表示
  autoplay: false,              // 自動再生のON/OFF
  autoplaySpeed: 3000,          // 自動再生時の切り替え間隔（ms）
  speed: 400,                   // スライドの移動スピード（ms）
  pauseOnHover: true,           // スライダー上にマウスが乗ると自動再生を停止
  pauseOnDotsHover: true,       // ドットにマウスが乗ると自動再生を停止
  infinite: true,               // 無限ループ（trueで最後→最初へループ）
  initialSlide: 0,              // 最初に表示するスライドのインデックス番号
  lazyLoad: 'ondemand',         // 画像の遅延読み込み（'ondemand' or 'progressive'）
  slidesToShow: 4,              // 一度に表示するスライドの数
  slidesToScroll: 1,            // 一度にスクロールするスライドの数
  swipe: true,                  // スワイプ操作の有効化（スマホ向け）
  vertical: false,              // 垂直スライドにするか（水平方向がデフォルト）
  centerMode: true,             // 中央寄せ表示（1枚目を中央に表示）
  centerPadding: '50px',        // 中央寄せの左右余白
  cssEase: 'ease'               // アニメーション効果の指定（例：linear, ease-in）
});