フロントエンド

【初心者向け】Swiperの使い方とカスタマイズ方法を徹底解説！

近年、ウェブサイトのスライダー機能を実装する際に Swiper を使うケースが増えています。Swiperは軽量で高機能なスライダープラグインで、レスポンシブ対応やタッチ操作にも強いのが特徴です。この記事では、Swiperの基本的な使い方からカスタマイズ方法まで、初心者向けに詳しく解説します。

Swiperとは？

Swiper は、モバイルフレンドリーなスライダーライブラリで、多くのウェブサイトやアプリで採用されています。主な特徴として以下が挙げられます。

  • 軽量 & 高速: シンプルで動作が軽い
  • タッチ操作対応: スワイプジェスチャーを簡単に実装可能
  • レスポンシブ対応: 幅広いデバイスで最適な表示
  • 多機能: 無限ループ・自動再生・サムネイル連携など豊富なオプション
  • 最新技術対応: モジュールベースでES6以降の環境にも対応

Swiperの基本的な使い方

1. Swiperのインストール

SwiperはCDN経由で読み込むか、npmでインストールできます。

CDNを使用する場合（簡単な方法）

HTMLファイル内に以下のコードを追加します。

<!-- SwiperのCSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">

<!-- SwiperのJS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

npmを使用する場合（推奨）

npm install swiper

JavaScriptでSwiperをインポートします。

import Swiper from 'swiper';
import 'swiper/css';

2. HTMLの準備

Swiperを適用するためのHTMLを記述します。

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="image1.jpg" alt="Image 1"></div>
    <div class="swiper-slide"><img src="image2.jpg" alt="Image 2"></div>
    <div class="swiper-slide"><img src="image3.jpg" alt="Image 3"></div>
  </div>
  
  <!-- ナビゲーションボタン -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  
  <!-- ページネーション -->
  <div class="swiper-pagination"></div>
</div>

3. Swiperの初期化

JavaScriptでSwiperを初期化します。

document.addEventListener("DOMContentLoaded", function () {
  const swiper = new Swiper('.swiper', {
    loop: true, // ループスライド
    autoplay: { delay: 3000 }, // 自動再生
    navigation: { // ナビゲーションボタン
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    pagination: { // ページネーション
      el: '.swiper-pagination',
      clickable: true,
    },
  });
});

Swiperのカスタマイズ方法

Swiperはデフォルト設定でも十分便利ですが、さらに高度なカスタマイズも可能です。

1. スライドの表示枚数を変更

const swiper = new Swiper('.swiper', {
  slidesPerView: 3, // 1画面に3枚表示
  spaceBetween: 10, // スライド間の余白
});

2. スクロールバーを追加

const swiper = new Swiper('.swiper', {
  scrollbar: { el: '.swiper-scrollbar', draggable: true },
});

HTMLに以下を追加します。

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

3. サムネイル付きスライダーを作成

const thumbSwiper = new Swiper('.thumb-swiper', {
  slidesPerView: 5,
  spaceBetween: 10,
  watchSlidesProgress: true,
});

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

HTML構造:

<div class="main-swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="main1.jpg" alt="Main Image 1"></div>
    <div class="swiper-slide"><img src="main2.jpg" alt="Main Image 2"></div>
    <div class="swiper-slide"><img src="main3.jpg" alt="Main Image 3"></div>
  </div>
</div>

<div class="thumb-swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="thumb1.jpg" alt="Thumb 1"></div>
    <div class="swiper-slide"><img src="thumb2.jpg" alt="Thumb 2"></div>
    <div class="swiper-slide"><img src="thumb3.jpg" alt="Thumb 3"></div>
  </div>
</div>

まとめ

Swiperを使えば、簡単にスライダーを実装できます。本記事では基本的な導入方法から、カスタマイズ方法までを解説しました。

ポイントのおさらい
✅ SwiperはCDN・npmのどちらでも導入可能
✅ 基本のHTML構造を理解すれば簡単に実装できる
✅ スライド枚数の調整・スクロールバー・サムネイル連携などのカスタマイズが可能

Swiperを活用して、より魅力的なウェブサイトを作ってみてください！

-フロントエンド
-