jsで簡単にスライダーを実装する。【swiper.js：ver8】

はじめに
実装
まとめ

はじめに

簡単にスライダーを実装するライブラリとして有名なswiper.js。

コードの紹介はいろいろなページで行われていますが、バージョンが古いものも多いため、最新バージョンであるswiper8での実装について解説します。

実装

デモ

とりあえずよく使いそうなパラメータを仕込んで作成したデモ。

See the Pen swiper by masahiro nomura (@masahiroview) on CodePen.

導入手順

①css・jsのcdnを読み込む。

以下のcdnを読み込んで使います。

//cdn
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
//js
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

頻繁に更新されるようなので、最新版はこちらでチェックしてください。

Getting Started With Swiper

Swiperisthemostmodernfreemobiletouchsliderwithhardwareacceleratedtransitionsandamazingnativebehavior.

html・css・JavaScriptでスライダーを作る

html

 <!-- スライダー全体 -->
<div class="swiper-container">
　<!-- スライド -->
  <div class="swiper-wrapper">
    <div class="swiper-slide red">page1</div>
    <div class="swiper-slide blue">page2</div>
    <div class="swiper-slide yellow">page3</div>
    <div class="swiper-slide black">page4</div>
    <div class="swiper-slide indigo">page5</div>
  </div>

  <!-- ページネーション-->
  <div class="swiper-pagination"></div>

  <!-- 前へ、次へボタン-->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

css

//スライドのサイズ・テキスト位置等調整
.swiper-slide {
  color: #ffffff;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 200px;
}

//各スライドの背景色
.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

.black {
  background-color: black;
}

.indigo {
  background-color: indigo;
}

JavaScript

//スライダー全体をswiperに指定する
const mySwiper = new Swiper('.swiper-container', {
  //ループ再生する
  loop: true,
  //１画面に表示するスライド数
  slidesPerView: 1,
  //スライド中心に表示する
  centeredSlides: true,
  //スライド切り替えの速度
  speed: 1000,
  //スライドのラッパーの高さをコンテンツに合わせる
  autoHeight: true,
  //自動でスライドを切り替える
  autoplay: {
    //自動再生の切り替えを2秒おきに行う
    delay: 2000,
    //手動で操作しても自動再生をやめない
    disableOnInteraction: false,
  },
  //ページネーションを表示する
  pagination: {
    //ページネーションのクラス
    el: ".swiper-pagination",
    //ページネーションをクリック可能にする
    clickable: true,
  },
  //ナビゲーションボタン
  navigation: {
   //「前へ」「次へ」ボタンのクラス
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
})

//スライドの切り替え開始時に実行されるコード
mySwiper.on('beforeSlideChangeStart', function () {
  console.log('スライド切り替え開始');
});

//スライドの切り替え終了時に実行されるコード
mySwiper.on('slideChangeTransitionEnd', function () {
  console.log('スライド切り替え終了');
});

jsコードのポイント

スライドの設定パラメータ

上のコードを見れば分かる通り、ループ・速度・自動再生等、幅広く指定することが可能です。ここで紹介してるのはほんの一部ですので、詳細は公式ををご参照ください。

Swiper API

Swiperisthemostmodernfreemobiletouchsliderwithhardwareacceleratedtransitionsandamazingnativebehavior.

スライド挙動時のアクション

スライド切り替え時など、スライドが稼働した際に発火するアクションを設定できます。

※上のコード例では下記の部分

//スライドの切り替え開始時に実行されるコード
mySwiper.on('beforeSlideChangeStart', function () {
  console.log('スライド切り替え開始');
});

//スライドの切り替え終了時に実行されるコード
mySwiper.on('slideChangeTransitionEnd', function () {
  console.log('スライド切り替え終了');
});

こちらもたくさんのパターンがありますので詳細は公式をご参照ください。