Swiper応用編｜サムネイル・フェード・複数表示｜カスタマイズ方法を徹底解説

Swiperを使うと、スライダーやカルーセルを柔軟に実装できるため、Webサイトの見せ方の幅が大きく広がります。
本記事では、基本的な実装から一歩進んだ「サムネイル付きスライダー」「フェード切り替え」「複数枚表示」の3パターンを中心に、カスタマイズの考え方を整理します。

※Swiperの基本的な設置方法やCDNの読み込みなどの初期設定が不安な場合は、「Swiper入門ガイド｜初心者でもできるスライダー実装」のような入門記事から確認しておくと理解しやすくなります。

1. Swiper応用カスタマイズの前提

1-1. 基本構造（HTML）のおさらい

Swiperは、基本的に以下のような構造で動作します。

<div class="swiper main-slider">
  <div class="swiper-wrapper">
    <div class="swiper-slide">スライド1</div>
    <div class="swiper-slide">スライド2</div>
    <div class="swiper-slide">スライド3</div>
  </div>

  <!-- ページネーション -->
  <div class="swiper-pagination"></div>

  <!-- ナビゲーション -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

JavaScript側では、次のように初期化します。

const mainSwiper = new Swiper('.main-slider', {
  loop: true,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

DOMの取得やクラスの付け替えなどの基本は、
「DOM操作の基本｜要素取得・イベント・クラス操作を体験」などのJavaScript入門記事を併せて確認しておくと、Swiperのコードも理解しやすくなります。

2. サムネイル付きスライダーの実装

商品画像のギャラリーや写真ポートフォリオなどでは、「メイン画像＋サムネイル」を連動させたレイアウトがよく使われます。
Swiperでは、thumbs オプションを利用することで、比較的シンプルなコードで実現できます。

2-1. HTML構造の例

メインスライダーと、サムネイル用スライダーを2つ用意します。

<!-- メインスライダー -->
<div class="swiper main-slider">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="img01.jpg" alt="商品写真1">
    </div>
    <div class="swiper-slide">
      <img src="img02.jpg" alt="商品写真2">
    </div>
    <div class="swiper-slide">
      <img src="img03.jpg" alt="商品写真3">
    </div>
  </div>
</div>

<!-- サムネイルスライダー -->
<div class="swiper thumb-slider">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="img01_thumb.jpg" alt="商品写真1のサムネイル">
    </div>
    <div class="swiper-slide">
      <img src="img02_thumb.jpg" alt="商品写真2のサムネイル">
    </div>
    <div class="swiper-slide">
      <img src="img03_thumb.jpg" alt="商品写真3のサムネイル">
    </div>
  </div>
</div>

画像の代替テキスト（alt属性）の書き方については、「画像のalt属性の正しい書き方とSEO効果」で詳しく整理しておくと、アクセシビリティやSEOの観点でも役立ちます。

2-2. JavaScriptの設定例

サムネイル用Swiperを先に生成し、メインSwiper側で thumbs.swiper として渡します。

// サムネイル用
const thumbSwiper = new Swiper('.thumb-slider', {
  slidesPerView: 4,
  spaceBetween: 8,
  watchSlidesProgress: true,
  slideToClickedSlide: true,
});

// メイン用
const mainSwiper = new Swiper('.main-slider', {
  loop: true,
  thumbs: {
    swiper: thumbSwiper,
  },
});

主なポイント

• slidesPerView
  サムネイルを何枚並べるかの指定です。
• spaceBetween
  サムネイル同士の余白です。余白の考え方は、「CSSのmarginとpaddingの違いを徹底比較｜余白設定のコツ」の内容と合わせて整理しておくとデザインしやすくなります。
• watchSlidesProgress
  サムネイル側のスライドの状態を監視し、メインと同期させるための設定です。
• slideToClickedSlide
  サムネイルをクリックしたときに、そのスライドにメインも同期させる設定です。

2-3. レスポンシブ対応（ブレイクポイント）

サムネイルの枚数は、画面幅に応じて変えられます。
Swiperの breakpoints オプションを使うと、メディアクエリに近い感覚で指定できます。

const thumbSwiper = new Swiper('.thumb-slider', {
  spaceBetween: 8,
  slidesPerView: 3,
  breakpoints: {
    768: {
      slidesPerView: 4,
    },
    1024: {
      slidesPerView: 5,
    },
  },
});

CSSでのレスポンシブ対応に慣れておくと、Swiperのブレイクポイント指定も理解しやすくなります。
メディアクエリの基礎は、「CSSでメディアクエリを使う方法」などで押さえておくと便利です。

3. フェード切り替えスライダーの実装

メインビジュアルやファーストビューで、ふわっと画像が切り替わる表現をしたい場合は、effect: 'fade' を使うフェード切り替えが適しています。

3-1. シンプルなHTML例

<div class="swiper fv-slider">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="kv01.jpg" alt="キービジュアル1">
    </div>
    <div class="swiper-slide">
      <img src="kv02.jpg" alt="キービジュアル2">
    </div>
    <div class="swiper-slide">
      <img src="kv03.jpg" alt="キービジュアル3">
    </div>
  </div>

  <div class="swiper-pagination"></div>
</div>

3-2. フェード用のJavaScript設定

const fvSwiper = new Swiper('.fv-slider', {
  loop: true,
  effect: 'fade',
  speed: 800,
  fadeEffect: {
    crossFade: true,
  },
  autoplay: {
    delay: 4000,
    disableOnInteraction: false,
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});

よく使うオプション

• effect: 'fade'
  スライドの切り替えをフェードに変更します。
• speed
  切り替えにかかる時間（ミリ秒）です。数値を大きくするとゆっくり切り替わります。
• fadeEffect.crossFade
  前のスライドと次のスライドが少し重なるように切り替わるため、自然なフェードになります。
• autoplay
  自動再生の間隔や挙動の調整です。

メインビジュアル部分のレイアウト調整では、height や object-fit などのCSS指定も重要になります。
CSSの長さ単位の選び方は、「CSSでサイズ指定を理解する｜px・em・remの違い」を参考にすると、レスポンシブな設計がしやすくなります。

4. 複数枚表示スライダー（カルーセル）の実装

カードデザインの一覧や、ブログ記事の関連記事を横並びに表示したい場合は、1画面に複数枚のスライドを表示するカルーセルが便利です。

4-1. HTML構造の例

<div class="swiper card-slider">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <article class="card">
        <h3 class="card__title">記事タイトル1</h3>
        <p class="card__text">記事の概要テキストが入ります。</p>
      </article>
    </div>
    <div class="swiper-slide">
      <article class="card">
        <h3 class="card__title">記事タイトル2</h3>
        <p class="card__text">記事の概要テキストが入ります。</p>
      </article>
    </div>
    <!-- 以降繰り返し -->
  </div>

  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

カードレイアウトの基本的な考え方は、「FlexboxとGridの基礎｜レスポンシブレイアウトを理解する」を参考にすると、CSS設計がしやすくなります。

4-2. 複数表示のJavaScript設定

const cardSwiper = new Swiper('.card-slider', {
  loop: true,
  spaceBetween: 24,
  slidesPerView: 1.2, // スマホで少しはみ出させる例
  centeredSlides: false,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  breakpoints: {
    640: {
      slidesPerView: 2,
    },
    1024: {
      slidesPerView: 3,
    },
  },
});

設定の考え方

• slidesPerView
  1画面に表示するスライドの数です。
  小数を指定すると、次のスライドを少し覗かせるデザインも可能です。
• spaceBetween
  スライド間の余白です。PCでは広め、スマホでは狭めにするなど、breakpoints で出し分けることもできます。
• breakpoints
  画面幅によって表示枚数を切り替えることで、スマホ・タブレット・PCそれぞれで見やすいカルーセルになります。

5. ナビゲーションやデザインのカスタマイズ

5-1. 独自デザインの矢印・ページネーション

Swiperのデフォルト矢印やページネーションは、そのままでも利用できますが、サイトデザインに合わせてカスタマイズすると統一感が出ます。

/* 矢印 */
.swiper-button-prev,
.swiper-button-next {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background-color: rgba(0, 0, 0, 0.5);
}

/* ページネーション */
.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  opacity: 0.4;
}

.swiper-pagination-bullet-active {
  opacity: 1;
}

ブラウザごとの差異や初期スタイルのリセットは、「CSSリセットの基本｜ブラウザ差異をなくす方法」の内容と組み合わせておくと、デザイン崩れを防ぎやすくなります。

5-2. レイアウトと余白調整

スライダー周辺の余白や高さの調整は、CSS設計全体の一部として考えると管理しやすくなります。

• セクションの上下余白 → margin / padding の使い分け
• スライダーの高さ → vh や min-height、object-fit: cover; など

余白に関する悩みが多い場合は、「CSSのmarginとpaddingの違いを徹底比較｜余白設定のコツ」を確認しておくと、スライダー以外のレイアウトにも応用しやすくなります。

6. WordPressでSwiperを使うときの注意点

WordPressサイトでSwiperを利用する場合は、テーマやプラグインのスクリプトとの競合に注意する必要があります。

• functions.php からSwiperのCSS・JSを読み込む
• 既存のjQuery系スライダーと重複しないようにする
• ブロックエディタ内で使う場合は、ショートコードや専用ブロックを用意する

functions.php の扱いに不慣れな場合は、「functions.php の編集方法（初心者向け）」や、「WordPressでテーマファイルを編集する方法（初心者向け）」などの基礎記事を確認しておくと、WordPress特有の注意点も把握しやすくなります。

7. まとめと次に確認したいポイント

本記事では、Swiperの応用的なカスタマイズとして、次の3パターンを整理しました。

• サムネイル付きスライダー
  • thumbs オプションでメインとサムネイルを連動
  • slidesPerView や breakpoints でサムネイル数を調整
• フェード切り替えスライダー
  • effect: 'fade' と fadeEffect.crossFade でなめらかな切り替え
  • メインビジュアルなど印象を重視したい部分に向いている
• 複数枚表示スライダー（カルーセル）
  • slidesPerView と breakpoints でデバイスごとの表示数を制御
  • カード型レイアウトとの組み合わせで一覧性が向上

あわせて、次のようなポイントも押さえておくと、Swiperの実装をより安定させやすくなります。

• CSSレイアウトの基礎（Flexbox / Grid / 余白設計）
• 画像のalt属性やレスポンシブ画像の扱い
• WordPressテーマやプラグインとの連携方法

JavaScriptの基礎構文やthisの挙動などに課題がある場合は、「JavaScriptのthisを理解する｜関数やイベントでの挙動を整理」といったJavaScript入門記事を併読することで、Swiperのカスタマイズに対する理解も深まりやすくなります。