Swiper.js入門：基本実装からレスポンシブ、モーダル連携まで徹底解説

Webサイトに動きと魅力を加える「スライダー」。多くのWebサイトで導入されていますが、ゼロから作るのは大変ですよね。そんな時、非常に便利なのがJavaScriptライブラリの「Swiper.js」です。

この記事では、計6回の社内研修で扱った内容を元に、Swiper.jsの基本的な使い方から、ページネーションの設置、レスポンシブ対応、さらにはモーダルウィンドウとの連携といった応用テクニックまで、テーマごとに分かりやすく解説します。

Web制作を始めたばかりの方でもコピペで試せるよう、具体的なコードも紹介していきますので、ぜひ一緒に実装してみましょう。

Swiper.jsの基本的な実装方法

まずは、Swiper.jsを利用するために必要なファイルをHTMLに読み込ませます。今回はCDN（コンテンツ・デリバリー・ネットワーク）を利用して、CSSファイルとJavaScriptファイルを読み込みます。

HTMLの構造は、指定されたクラス名（.swiper, .swiper-wrapper, .swiper-slide）で要素を囲むのが基本です。スライドさせる画像はダミー画像を使用しています。

HTML (head内とbody内)

<!-- head内にswiperのCSSを読み込み -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"/>

<!-- body内のスライダーを設置したい場所 -->
<!-- Slider main container -->
<div class="swiper">
	<!-- Additional required wrapper -->
	<div class="swiper-wrapper">
		<!-- Slides -->
		<div class="swiper-slide"><img src="https://placehold.jp/200x200.png"></div>
		<div class="swiper-slide"><img src="https://placehold.jp/200x200.png"></div>
		<div class="swiper-slide"><img src="https://placehold.jp/200x200.png"></div>
	</div>
</div>

JavaScript (body閉じタグ直前)

<!-- swiperのJavaScriptを読み込み -->
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<script>
  const swiper = new Swiper('.swiper', {
    // ここにオプションを指定
    // 例:
    // loop: true,
  });
</script>

これだけで、画像（ダミー画像）を横にスワイプできるスライダーが実装できます。
Swiperの設定は、JavaScriptの new Swiper('.swiper', { ... }); の波括弧 {} の中に「オプション名: 値」の形式で指定することで、自由にカスタマイズできます。

オプションの詳細は公式サイト（APIドキュメント）に網羅されています。

オプションの指定例 (JavaScript)

<script>
  const swiper = new Swiper('.swiper', {
    loop: true, //スライダーをループさせる
    autoplay: { //自動でスライドさせる
      delay: 5000, //自動再生の時間間隔（ミリ秒）を指定
    }
  });
</script>

ページネーション・ナビゲーションボタンの設置

次に、スライダーの操作性を向上させるUI（ユーザーインターフェース）を追加します。スライダーの現在地を示す「ページネーション」や、前後に送る「ナビゲーションボタン」、スライド位置を示す「スクロールバー」を設置してみましょう。

HTML (.swiper の内部)

<div class="swiper">
	<div class="swiper-wrapper">
		<!-- Slides -->
		<div class="swiper-slide"><img src="https://placehold.jp/200x200.png"></div>
		<div class="swiper-slide"><img src="https://placehold.jp/200x200.png"></div>
		<div class="swiper-slide"><img src="https://placehold.jp/200x200.png"></div>
	</div>
	
	<!-- 必要に応じてページネーション設置 -->
	<div class="swiper-pagination"></div>
	
	<!-- 必要に応じてナビボタン設置 -->
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
	
	<!-- 必要に応じてスクロールバー設置 -->
	<div class="swiper-scrollbar"></div>
</div>

HTMLに要素を追加したら、JavaScriptのオプションにも、それらの要素を有効にするための設定を追記します。

JavaScript (オプションの追記)

<script>
  const swiper = new Swiper('.swiper', {
    // ページネーションが必要なら追加
    pagination: {
      el: '.swiper-pagination',
      clickable: true, // ページネーションをクリックしてスライドを移動させる
    },

    // ナビボタンが必要なら追加
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

    // スクロールバーが必要なら追加
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  });
</script>

矢印（ナビゲーション）ボタンのデザイン変更

デフォルトの青い矢印ボタンは、CSSで簡単にデザイン変更が可能です。
:after 擬似要素にデフォルトのスタイルが当たっているため、それを上書きします。

CSS

.swiper-button-next:after,
.swiper-button-prev:after {
  font-size: 0; /* デフォルトのアイコン（文字）を非表示に */
  background-image: url(https://placehold.jp/200x200.png); /* 好きな画像を指定 */
  background-repeat: no-repeat;
  background-size: contain; /* サイズ調整 */
  width: 50px; /* 適切な幅を指定 */
  height: 50px; /* 適切な高さを指定 */
}

また、Swiperはスライダーが最初や最後に達した際に swiper-button-disabled といったクラスを自動で付与します。このクラスを利用して、端に達した時だけ矢印を非表示にしたり、スタイルを変更したりすることも可能です。

CSS (無効時のスタイル例)

/* 例：最初/最後でボタンを半透明にする */
.swiper-button-disabled {
  opacity: 0.5;
  pointer-events: none; /* クリックできなくする */
}

スライダーの動作（イベント）をトリガーにした処理の実行

スライダーが動いた瞬間や、切り替わりが完了したタイミングで、特定のJavaScript処理を実行させることができます。
これは on オプション（イベントリスナー）を使って指定します。どのようなイベントがあるかは公式サイトのEvents項目で確認できます。

JavaScript (on オプションの例)

<script>
  const swiper = new Swiper('.swiper', {
    // ... 他
    
    on: {
      slideChangeTransitionStart: function () {
        //スライダーが移動を開始する直前に実行
        console.log('スライダーが移動します');
      },
      slideChangeTransitionEnd: function () {
        //スライダーが移動し終わったタイミングで実行
        console.log('スライダーが移動しました');
      },
    }
  });
</script>

レスポンシブ対応（PCとスマートフォンでの切り替え）

「PC表示ではスライダーを無効にし、スマートフォン表示の時だけスライダーを有効にしたい」といったレスポンシブ対応も可能です。

当初 window.addEventListener の resize イベントで切り替えを試みましたが、この方法ではウィンドウサイズが変わる（リサイズする）たびに処理が実行されてしまいます。

そこで、jQueryも併用し、ブレークポイント（ここでは750px）が切り替わったタイミングで一度だけ処理を実行する window.matchMedia を使う方法を採用しました。

JavaScript (matchMedia を使った例)

<!-- jQuery本体の読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Swiper.js本体の読み込み -->
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<script>
$(function () {
  var deviceflag = '';
  let myswiper; // Swiperのインスタンスを格納する変数

  // Swiperを初期化する関数
  var createSwiper = function() {
    myswiper = new Swiper('.swiper', {
      // SP時のみ有効にしたいオプションをここに書く
      // 例:
      // loop: true,
      // slidesPerView: 1.2,
      // spaceBetween: 20,
    });
  };

  $(window).on('load resize', function () {
    // window.matchMediaでブレークポイントを指定
    var w = window.matchMedia('(max-width: 750px)').matches;

    // SP幅 (750px以下) の場合
    if (w === true && deviceflag != 'sp') {
      deviceflag = 'sp';
      // sp時の処理
      createSwiper(); // Swiperを初期化

    // PC幅 (751px以上) の場合
    } else if (w === false && deviceflag != 'pc') {
      deviceflag = 'pc';
      // pc時の処理
      if (myswiper){
        myswiper.destroy(false,true); // Swiperを破棄（無効化）
      };
    }
  });
});
</script>

応用編：モーダルウィンドウ内でスライダーを動作させる

最後に、少し応用的な実装として、サムネイル画像をクリックするとモーダルウィンドウが開き、その中でSwiperスライダーが動作する機能を紹介します。

実装する仕様:

• サムネイル画像をクリックするとモーダルが開く。
• モーダル内にはSwiperスライダーが表示され、クリックした画像に対応するスライドが最初に表示される。
• モーダル右上の閉じるボタン、または背景をクリックするとモーダルを閉じる。

大まかな実装手順:

1. HTML：モーダルが開く前（トリガーとなるサムネイル）と、開いた後のモーダル本体（スライダーを含む）を作成します。
2. CSS：モーダルの初期状態は opacity: 0; などで隠しておき、.is-active のようなクラスが付与されたら opacity: 1; にして表示させます。
3. JavaScript：サムネイル画像をクリックしたら、クリックされたスライドの番号（data-modal 属性で指定）を取得し、Swiperの .slideTo() メソッドでそのスライドに移動させます。同時にモーダルに .is-active クラスを付与して表示します。閉じるボタンや背景をクリックしたら .is-active クラスを除去してモーダルを非表示にします。

（参考サイト： JavaScriptのSwiperをモーダルでスライダー・カルーセル表示）

HTML

<!-- モーダルを開く前の状態 (トリガー) -->
<!-- .modalOpen をクリックすると、data-modal="数値" と同じスライドが開く -->
<ul class="swiperModalButton">
  <li class="modalOpen" data-modal="0"><img src="https://placehold.jp/200x200.png"></li>
  <li class="modalOpen" data-modal="1"><img src="https://placehold.jp/200x200.png"></li>
  <li class="modalOpen" data-modal="2"><img src="https://placehold.jp/200x200.png"></li>
</ul>

<!-- モーダルを開いた時の状態 (モーダル本体) -->
<div class="modal" id="modal">
  <div class="modal__overlay modalClose"></div> <!-- 背景（クリックで閉じる） -->
  <div class="modal__content">
    <div class="modal_inner">
    <div class="modal__close-btn modalClose" aria-label="閉じる"><span class="lineClose"></span></div>
    <!-- スライダー本体 -->
    <div class="swiper modalInSlider">
      <div class="swiper-wrapper">
        <div class="swiper-slide modalInSlider"><p class="swiperText">スライド1</p></div>
        <div class="swiper-slide modalInSlider"><p class="swiperText">スライド2</p></div>
        <div class="swiper-slide modalInSlider"><p class="swiperText">スライド3</p></div>
      </div>
    </div>
    </div>
      <!-- モーダル内のナビゲーションボタン -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
  </div>
</div>
<!-- モーダルここまで -->

CSS

/* サムネイルリスト */
.swiperModalButton {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-around;
  padding: 0;
  list-style: none;
}
.swiperModalButton li {
  cursor: pointer;
}
.swiperModalButton li:hover {
  opacity: .8;
  transition: .3s;
}

/* モーダル本体 */
/* モーダルは常に画面に追従させるため position: fixed を指定 */
/* 画面いっぱいに広げるため width: 100% と height: 100vh を指定 */
/* 初期状態では隠すため opacity: 0; と pointer-events: none; を指定 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s;
  pointer-events: none;
  opacity: 0;
  z-index: 100;
  background-color: rgba(255, 255, 255, 0.9);
}

/* モーダルにclass="is-active"が付与されたとき */
/* opacityを1にして表示し、pointer-events: auto; で操作可能にする */
.modal.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* モーダル背景のオーバーレイ部分 */
/* 背景クリックで閉じるため、カーソルを指定 */
.modal__overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* モーダルのコンテンツ */
.modal__content {
  position: relative;
  width: 100%;
  max-width: 800px;
  padding: 20px;
}
.modal_inner {
  filter: drop-shadow(0px 0px 4px #ddd);
  background: #FFF;
  width: 90%;
  margin: 0 auto;
  border-radius: 2px;
  padding: 20px 25px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

/* 閉じるボタン */
.modal__close-btn {
  position: absolute;
  right: 0;
  top: -40px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  z-index: 20;
}
.modal__close-btn:hover {
  opacity: 0.8;
}

/* 閉じるボタンのX（CSSで描画） */
.lineClose {
  display: inline-block;
  vertical-align: middle;
  color: #313131;
  line-height: 1;
  width: 2rem;
  height: 0.1rem;
  background: currentColor;
  border-radius: 0.1rem;
  position: relative;
  transform: rotate(45deg);
}
.lineClose::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  transform: rotate(90deg);
}
p.swiperText {
  margin: 0;
  text-align: center;
}

JavaScript

<script>
  window.addEventListener("DOMContentLoaded", () => {
    // JavaScriptで操作するため、各要素を取得
    const modal = document.getElementById("modal"); // モーダル本体
    const openModalBtns = document.querySelectorAll(".modalOpen"); // モーダルを開くボタン（サムネイル）
    const closeModalBtns = document.querySelectorAll(".modalClose"); // モーダルを閉じる要素（ボタンと背景）
  
    // Swiperの設定 (モーダル内のスライダーを .modalInSlider で指定)
    const swiper = new Swiper(".modalInSlider", {
      loop: true,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      spaceBetween: 30, // スライド間のマージン
    });
  
    // モーダルを開くボタン（サムネイル）がクリックされた時
    openModalBtns.forEach((openModalBtn) => {
      openModalBtn.addEventListener("click", () => {
        const modalIndex = openModalBtn.getAttribute('data-modal'); // data-modal属性からスライド番号を取得
        // swiper.slideTo(インデックス番号, 速度, コールバック)
        // ループ(loop: true)の場合、インデックス番号に注意が必要な場合がありますが、
        // 今回の例では data-modal の番号に合わせる形でスライドします。
        // (厳密には loop:true の場合、実際のインデックスに +1 するなどの調整が必要なケースもあります)
        swiper.slideTo(parseInt(modalIndex) + 1, 0, false); // 0秒で指定のスライドに移動
        
        modal.classList.add("is-active"); // モーダルに .is-active を付与して表示
      });
    });
  
    // モーダルを閉じる要素がクリックされた時
    closeModalBtns.forEach((closeModalBtn) => {
      closeModalBtn.addEventListener(&"click", () => {
        modal.classList.remove("is-active"); // モーダルから .is-active を除去して非表示
      });
    });
  });
</script>

まとめ

今回は、JavaScriptライブラリ「Swiper.js」の基本的な使い方から、レスポンシブ対応やモーダル連携といった応用テクニックまで、研修内容を元にご紹介しました。Swiper.jsは非常に高機能で、オプションやイベントも豊富に用意されています。この記事を参考に、ぜひあなたのWebサイトに魅力的なスライダーを実装してみてください。

よくある質問（FAQ）

Q1. Swiper.jsを導入するのに、CDNリンク以外に何かダウンロードは必要ですか？

A1. この記事で紹介している方法では、HTMLにCSSとJavaScriptのCDNリンクを読み込むだけで利用できます。別途ファイルをダウンロードする必要はありません。

Q2. スライダーの矢印ボタンのデザインは自由に変えられますか？

A2. はい、可能です。.swiper-button-next:after や .swiper-button-prev:after といったCSSセレクタに対して、background-image や font-size: 0; などを指定することで、デフォルトの矢印を非表示にして独自の画像やスタイルに変更できます。

Q3. PCの時はスライダーにせず、スマートフォンだけでスライダーにすることはできますか？

A3. はい、window.matchMedia を使用することで実現できます。特定の画面幅（例：750px以下）になった時だけSwiperを初期化 (new Swiper()) し、それ以外の画面幅では .destroy() メソッドでSwiperを無効にする、といった処理を記述します。