◆当ページにはプロモーションが含まれています

JavaScript

【サンプル付き】スライダー実装の定番! 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',
  },
})

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

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

エンジニアにおすすめ転職サイト

マイナビIT AGENT
迷ったらまずはココ。求人数が多いため希望や条件にマッチする求人が見つかる!

レバテックキャリア
担当者のレベルが高い。エンジニア特化で15年の実績がある実績で初回提案での内定率驚異の90%!

JOIN
副業やフリーランスとして高額報酬案件を見つけるならJOIN。未経験者でも案件獲得実績豊富が強み!

\面白いと思ったら/

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

@proglearn
一緒によく読まれている記事

COMMENT

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