HTML

【サンプル付き】スライダー実装の定番! SwipeJSを使ってみよう

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

今回は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',
  },
})

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

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

ABOUT ME
どんぶラッコ
ECコンサルタント、システムエンジニア経験を経て、ProgLearnのシステム開発を担当。

\面白いと思ったら/

記事のシェア & Twitter のフォロー をお願いします!

@proglearn

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です