LAB 2021.12.20

スライダー(Swiper)

Written by mizuno

INDEX

説明

swiper.jsでスライダーを実装します。(バージョン7.3.1)

サンプル

使用するライブラリ

Swiper.js

公式サイト:https://swiperjs.com/

手順

手順1

Swiperをプロジェクトに含めます。

NPM、CDN、アセットをローカルでダウンロードする方法があります。

NPMからインストール

$ npm install swiper

import方法はこちらを参照してください。

CDNのSwiperを使用する

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

アセットをダウンロード

アセットをローカルで使用する場合は、https://unpkg.com/browse/swiper@7.3.2/からダウンロードして使用します。

手順2（HTML）

今回のサンプルのベースとなる構造は下記の通りです。

ページネーション、カウンターはスライダーの外側に配置したいので.swiper-wrapperの外に記述しています。

<div class="swiper">
  <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 class="swiper-slide">Slide 3</div>
  </div>

   <div class="utility">
     <div class="swiper-pagination"></div>
     <div class="inner">
       <div class="swiper-button-prev"></div>
         <div class="fraction">
           <span class="current"></span><span class="split"></span><span class="total"></span>
         </div>
       <div class="swiper-button-next"></div>
     </div>
   </div>
</div>

手順3（JS）

swiperのオプションを記述していきます。

let total = document.querySelector('.total')
let current = document.querySelector('.current')
let totalNumber
let currentNumber

const myswiper = new Swiper('.swiper', {
 speed: 800, // スライドが切り替わる時の速さ
 slidesPerView: '2.5', // スライド表示数
 spaceBetween: 50, // スライド間の距離
 loop: true, // ループさせる
 centeredSlides: true, // スライドを中央に配置にする
 autoplay: { // 自動再生させる
  delay: 2500, // 次のスライドまでの秒数
  disableOnInteraction: false, // ユーザーがスライダー操作後も自動再生し続ける
 },

 pagination: { // ページネーション追加
  el: '.swiper-pagination', // ページネーションとして認識させるクラス
  type: 'bullets', // タイプの指定
  clickable: true, // ページネーションをクリックしたら移動する
 },

 // Navigation arrows
 navigation: { // ナビゲーション追加
  nextEl: '.swiper-button-next', // ナビゲーションとして認識させるクラス
  prevEl: '.swiper-button-prev', // ナビゲーションとして認識させるクラス
 },

 on: { // イベントの登録
  init: function (e) { // 初期化直後に発生するイベント
   totalNumber = e.pagination.bullets.length
   currentNumber = e.realIndex + 1
    
   total.textContent = totalNumber <= 9 ? '0' + totalNumber : totalNumber
   current.textContent = currentNumber <= 9 ? '0' + currentNumber : currentNumber
  },

  slideChange: function (e) { // アクティブなスライドが変更されると発生するイベント
   currentNumber = e.realIndex + 1
   current.textContent = currentNumber <= 9 ? '0' + currentNumber : currentNumber
  }
 }
});