【サンプル付き】スライダー実装の定番！ SwipeJSを使ってみよう｜ProgLearn｜エンジニアのためのプログラミング情報メディア

みなさん、こんにちは。どんぶラッコです。

今回はSwiperJSについてご紹介します！

よく


	
	普段の私
	あれ...なんだっけあの...右から左に画像がどんどん移動するやつ...

となるので、情報としてまとめておこうと思います。

設定方法
1. CSS, JSを読み込む
2. HTMLを設置する
SwiperJS の初期設定を記述

設定方法

公式のGettingStartを参考に設定をしていきます。

<html>
  <head>
  ...
  <!-- CSSを追加 -->
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
  </head>
  <body>
    <!-- スライダーのメインコンテナ -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <!-- スライドたち -->
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</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>
    <!-- JSを追加 -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <!-- SwiperJSの初期設定を追記 -->
    <script>
      const mySwiper = new Swiper('.swiper-container', {
      // オプションパラメータ
      direction: 'vertical',
      loop: true,

      // ページネーションが欲しい場合
      pagination: {
        el: '.swiper-pagination',
      },
    
      // ナビゲーションボタン
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },

      // スクロールばーが欲しい場合
      scrollbar: {
        el: '.swiper-scrollbar',
      },
    })
    </script>
  </body>
</html>

See the Pen SwiperJS Example by cha1ra (@cha1ra) on CodePen.

…どんなサンプルであっても「うわ！読む気なくすわー」と思う気持ち、わかります。

しかしやってることは本当に単純です。オプションパラメータにモザイクをかけるとその簡単さがよくわかると思います。

一つずつ見ていきましょう！

1. CSS, JSを読み込む

今回はCDN (外部サイト) から CSS, JSを取得しています。

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

2. HTMLを設置する

一番重要なのは .swiper-container で全体を囲うことです。 .swiper-slide が実際のコンテンツになります。

<!-- スライダーのメインコンテナ -->
<div class="swiper-container">
  <div class="swiper-wrapper">
    <!-- スライドたち -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</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>

ページネーション・ナビゲーション・スクロールバーはそれぞれ下記要素に対応します。

SwiperJS の初期設定を記述

directionでスクロール方向を、loopで画像を無限ループさせるかを決定します

const mySwiper = new Swiper('.swiper-container', {
  // オプションパラメータ
  direction: 'vertical',
  loop: true,

  // ページネーションが欲しい場合
  pagination: {
    el: '.swiper-pagination',
  },

  // ナビゲーションボタン
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // スクロールバーが欲しい場合
  scrollbar: {
    el: '.swiper-scrollbar',
  },
})

こうやって一つ一つ整理すると意外と簡単にできることがわかりますよね！

みなさんも是非挑戦してみてください♪