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

2023.12.01

JavaScript フロントエンド開発

Webサイトに動きを加え、限られたスペースで多くの情報を伝える「スライダー」。一から自作するのは非常に工数がかかりますが、JavaScriptライブラリの「Swiper.js」を使えば、高品質なスライダーを短時間で実装できます。

この記事ではSwiperの基本設定から、ナビゲーションの設置、jQueryを使ったレスポンシブ対応、そして応用編のモーダル連携までを詳しく解説します。Webサイト運営初心者の方やWeb制作者の方は、ぜひ参考にしてください。

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

まずは、Swiperを動かすために必要なCSSとJavaScriptファイルを読み込みます。今回は手軽なCDNを利用します。

1. ファイルの読み込み

HTMLの <head> 内にCSSを、<body> の閉じタグ直前にJavaScriptを記述してください。

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

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

2. HTMLの基本構造

Swiperは、特定のクラス名を持った要素を親子関係にする必要があります。.swiper の中に .swiper-wrapper、さらにその中に .swiper-slide を配置します。

<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide"><img src="https://placehold.jp/800x400.png" alt="スライド1"></div>
    <div class="swiper-slide"><img src="https://placehold.jp/800x400.png" alt="スライド2"></div>
    <div class="swiper-slide"><img src="https://placehold.jp/800x400.png" alt="スライド3"></div>
  </div>
</div>

3. JavaScriptでの初期化

ファイルの読み込みとHTMLの準備ができたら、JavaScriptでSwiperを起動させます。波括弧 {} 内にオプションを記述することで、挙動をカスタマイズできます。

<script>
  const swiper = new Swiper('.swiper', {
    loop: true, // スライドをループさせる
    autoplay: {
      delay: 5000, // 5秒ごとに自動再生
    },
  });
</script>

スライダーの構造と動作のイメージは、以下のJSFiddleで確認できます。

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

ユーザーが現在のスライド位置を把握したり、手動で操作したりするためのUIを追加します。HTMLに要素を追加し、JavaScriptのオプションで設定を行います。

<!-- HTMLの追加 -->
<div class="swiper">
  <div class="swiper-wrapper">...</div>
  
  <!-- ページネーション（ドット） -->
  <div class="swiper-pagination"></div>
  
  <!-- 前後ナビボタン -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

<script>
  const swiper = new Swiper('.swiper', {
    pagination: {
      el: '.swiper-pagination',
      clickable: true, // ドットクリックで移動可能
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
</script>

矢印ボタンのデザインをCSSで変える

デフォルトの青い矢印をオリジナル画像に変更するには、CSSの :after 擬似要素を編集します。デフォルトで設定されているフォントをリセットするのがコツです。

.swiper-button-next:after,
.swiper-button-prev:after {
  content: ""; /* デフォルトアイコンを消す */
  background-image: url('arrow.svg'); /* 好きな画像を指定 */
  background-repeat: no-repeat;
  background-size: contain;
  width: 40px;
  height: 40px;
}

画像のパスが正しくない場合、矢印が表示されなくなりますので注意してください。

イベント処理：動作に合わせて処理を実行

「スライドが変わった時にロゴの色を変えたい」といった特定のタイミングで処理を実行するには on オプションを使います。

<script>
  const swiper = new Swiper('.swiper', {
    on: {
      slideChange: function () {
        console.log('現在、' + (this.activeIndex + 1) + '枚目のスライドです');
      },
    },
  });
</script>

PCとスマホでのレスポンシブ切り替え処理

「PCでは全表示、スマホではスライダー」といった切り替えを行う際は、jQueryと window.matchMedia を併用します。リサイズごとに何度も処理が走らないよう、フラグ管理を行うのが現場のテクニックです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function () {
  let deviceFlag = '';
  let mySwiper;

  $(window).on('load resize', function () {
    const isMobile = window.matchMedia('(max-width: 750px)').matches;

    // スマホ幅（750px以下）かつ現在のフラグが「sp」でない場合
    if (isMobile && deviceFlag !== 'sp') {
      deviceFlag = 'sp';
      mySwiper = new Swiper('.swiper', {
        slidesPerView: 1.2,
        spaceBetween: 10,
      });
    } 
    // PC幅（751px以上）かつ現在のフラグが「pc」でない場合
    else if (!isMobile && deviceFlag !== 'pc') {
      deviceFlag = 'pc';
      if (mySwiper) {
        mySwiper.destroy(true, true); // スライダーを無効化
      }
    }
  });
});
</script>

応用編：モーダルウィンドウ内でスライダーを動かす

サムネイルをクリックするとモーダルが開き、選択した画像のスライドを表示させる実装です。以下の手順で行います。

サムネイルに data-modal-index="0" のような番号を振る。
クリック時にその番号を取得し、Swiperの slideToLoop() メソッドで移動させる。
モーダルに is-active クラスを付与し、CSSで表示（opacity 1）にする。

スライダーをループ（loop: true）にしている場合、slideTo ではなく slideToLoop を使うと番号のズレを防げます。

<script>
  const modalSwiper = new Swiper('.modal-swiper', { loop: true });

  $('.js-modal-open').on('click', function() {
    const slideIndex = $(this).data('modal-index');
    modalSwiper.slideToLoop(slideIndex, 0); // 即座に該当スライドへ移動
    $('#modal').addClass('is-active');
  });
</script>

まとめ

Swiperは、高機能でありながらシンプルなコードで導入できる優れたライブラリです。今回紹介したレスポンシブ対応やモーダル連携は、実際のWeb制作現場でも非常に多く求められる技術です。

最初は基本の構造を理解することから始め、徐々にオプションやイベントを組み合わせて、ユーザーにとって使いやすいWebサイトを目指しましょう。

よくある質問

Swiperが正しく表示されません。何を確認すべきですか？: まずはHTMLのクラス名が .swiper, .swiper-wrapper, .swiper-slide になっているか、CSSファイルが正しく読み込まれているかを確認してください。また、コンソールにエラーが出ていないかも重要です。
1ページに複数のスライダーを置くことは可能ですか？: はい、可能です。それぞれの .swiper 要素に個別のクラス（例：.main-visual と .sub-visual）を付け、JavaScriptでそれぞれに対して new Swiper() を実行してください。
レスポンシブでスライダーを解除した際にスタイルが崩れます。: .destroy(true, true) メソッドを使用すると、Swiperが動的に付与したスタイルやクラスを完全に削除できます。PC時のスタイルはあらかじめCSSで別途定義しておきましょう。

BACK TO LIST

CONTACT

webサイト制作、デザインに関するご相談、御見積のご依頼など、弊社へのお問い合わせはこちら

お問い合わせ