Swiper JS ガイド

jQueryなしでスライドショーを作成できるjavascriptライブラリに関するガイド

公式：

Swiper - The Most Modern Mobile Touch Slider

Swiperisthemostmodernfreemobiletouchsliderwithhardwareacceleratedtransitionsandamazingnativebehavior.

swiperjs.com

参考：

jQuery 不要 スライダープラグイン Swiper の使い方

jQuery不要でレスポンシブ及びタッチデバイス（スマホやタブレット）対応のスライダープラグインSwiper（バージョン7/8）の基本的な設定方法や使い方についての覚書（解説）です

www.webdesignleaves.com

SwiperをCodePenで試す方法

CodePen↓（Facebookでログイン）

Just a moment...

codepen.io

左バーCreateのPenの右にある「＞」をクリック

「From Template」から「Swiper-template」をクリック。

See the Pen Swiper-template by sakana27 (@haradaLupe) on CodePen.

ブログにコードペンをはりつけるには、

CodePen右下「Embed」> HTML形式でコピー > WordPress「カスタムHTML」を選択し貼り付け

Swiperの導入方法

SwiperのデフォルトのCSS

以下に一部抜粋

.swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
}
 
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}
 
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
}
 
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(-1 * var(--swiper-navigation-size) / 2);
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}
 
.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}
 
.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 100%;
  background: #000;
  opacity: 0.2;
}

テーマカラー

Swiper の CSS には CSS 変数を使ってテーマカラーやナビゲーションのサイズなどが設定されています。swiper.css（抜粋）

:root {
  --swiper-theme-color: #007aff;
}
 
:root {
  --swiper-navigation-size: 44px;
  /*
  --swiper-navigation-color: var(--swiper-theme-color);
  */
}
 
:root {
  /*
  --swiper-pagination-color: var(--swiper-theme-color);
  */
}

例えば、以下のような独自の CSS でスタイルを設定（上書き）すると、ナビゲーションの色を黒（#000000）に、ページネーションの色を白（#ffffff）に変更することができます。独自の CSS

:root {
  --swiper-navigation-color: #000000;
  --swiper-pagination-color: #ffffff;
}

イベント（Events）

Swiper には数多くのイベントも用意されていて、カスタマイズする際に利用することができます。

利用可能なイベントは「API/Events」に掲載されています。

また、個々のコンポーネントごとにもイベントが用意されているものもあり、API ページの各コンポーネントの項目で確認することができます。

イベント（リスナー）を登録するには以下の2つの方法があります。

on パラメータ

初期化の際に on パラメータを使ってイベントを登録できます。

let mySwiper = new Swiper('.swiper-container', { // 初期化の際に登録
  // ...初期化の処理
  on: {  
    init: function () {
      console.log('swiper initialized');
    },
  },
};

on メソッド

初期化の後に on メソッドを使ってイベントを登録することもできます。

let mySwiper = new Swiper('.swiper-container', {
  // ...初期化の処理
};
 
// 初期化の後で Swiper のインスタンスの on メソッドで登録
mySwiper.on('slideChange', function () {
  console.log('slide changed');
});

以下の例は初期化の際に init イベントでナビゲーションボタンに swiper-button-white というクラスを指定して色を白に変更しています。また初期化の後では on メソッドで slideChange イベントに現在のスライド番号をコンソールに出力する処理を登録しています。

let mySwiper01 = new Swiper ('#swiper01', {
 
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  
  on: {  // 初期化の際に init イベントを登録
    init: function () {
      const prev_btn =  document.querySelector('#swiper01 .swiper-button-prev');
      const next_btn =  document.querySelector('#swiper01 .swiper-button-next');
      prev_btn.classList.add('swiper-button-white');
      next_btn.classList.add('swiper-button-white');
    },
  },
})
 
// 初期化の後で slideChange イベントを登録（初期化の際に登録することも可能）
mySwiper01.on('slideChange', function () {
  console.log('現在のスライド番号： ' + (this.activeIndex + 1));
});

イベントハンドラ（処理登録）の中で this は常に Swiper のインスタンスを意味します。上記の場合、this.activeIndex は mySwiper01.activeIndex と同じです。

上記のコンソールに出力する処理では Swiper インスタンスのプロパティ activeIndex を参照しています。

イベントの例 API/Events

プロパティやメソッド

初期化でインスタンスを生成した後では、Swiper インスタンスのプロパティやメソッドを使用することができます。Swiper インスタンスのプロパティやメソッドは「Slider Methods & Properties」に掲載されています。

また、イベント同様、コンポーネントごとに用意されているプロパティやメソッドもあります。

コントロール

ナビゲーションボタンやページネーション、スクロールバーを表示するにはそれらの要素を HTML に記述して初期化の際にオプションで指定します。

また、デフォルトのスタイルを変更するには追加の CSS で上書き（設定）します。

ナビゲーション（Navigation）

ナビゲーション（前後のスライドへのボタン）を表示するには HTML に swiper-button-prev と swiper-button-next クラスの div 要素を記述します。

初期化の際には以下のパラメータを指定することができます。

以下はナビゲーションのデフォルトのスタイルです。

.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(-1 * var(--swiper-navigation-size) / 2);
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}
 
.swiper-button-prev.swiper-button-white,
.swiper-button-next.swiper-button-white {
  --swiper-navigation-color: #ffffff;
}
.swiper-button-prev.swiper-button-black,
.swiper-button-next.swiper-button-black {
  --swiper-navigation-color: #000000;
}
 
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}
 
.swiper-button-prev:after,
.swiper-button-next:after {
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  text-transform: none !important;
  letter-spacing: 0;
  text-transform: none;
  font-variant: initial;
}

ページネーション（Pagination）

ページネーション（何枚目のスライドかを示すアイコン）を表示するには、 HTML に swiper-pagination クラスの div 要素を記述します。

<div class="swiper-pagination"></div>
 
<!-- 以下のクラスを追加指定するとデフォルトの青から白や黒に変更可能 -->
<!-- 白色のページネーション .swiper-pagination-white -->
<div class="swiper-pagination swiper-pagination-white"></div>
 
<!-- 黒色のページネーション .swiper-pagination-black -->
<div class="swiper-pagination swiper-pagination-black"></div>

そして初期化の際にオプションの pagination を指定して必要なパラメータを設定します。

let mySwiper = new Swiper('.swiper-container', {
  pagination: {
    el: '.swiper-pagination',  //ページネーションの要素のセレクタ
    type: 'bullets',  //ページネーションのタイプ
  },
});

スクロールバー（Scrollbar）

スクロールバーを表示するには、HTML に swiper-scrollbar クラスの div 要素を記述します。スクロールバーの HTML

<div class="swiper-scrollbar"></div>

そして初期化の際にオプションの scrollbar を指定して必要なパラメータを設定します

let mySwiper = new Swiper('.swiper-container', {
  scrollbar: {
    el: '.swiper-scrollbar',  //スクロールバーの要素のセレクタ
    draggable: true,  //スクロールバーをドラッグ可能にする
  },
});

初期化の際には以下のパラメータを指定することができます

以下はスクロールバーのデフォルトのスタイルの一部です。

/* Scrollbar */
.swiper-scrollbar {
  border-radius: 10px;
  position: relative;
  -ms-touch-action: none;
  background: rgba(0, 0, 0, 0.1);
}
.swiper-container-horizontal > .swiper-scrollbar {
  position: absolute;
  left: 1%;
  bottom: 3px;
  z-index: 50;
  height: 5px;
  width: 98%;
}
.swiper-container-vertical > .swiper-scrollbar {
  position: absolute;
  right: 3px;
  top: 1%;
  z-index: 50;
  width: 5px;
  height: 98%;
}

draggable: true を設定したスクロールバーとナビゲーションを表示する例↓

See the Pen draggable: true を設定したスクロールバーとナビゲーションを表示する例 by sakana27 (@haradaLupe) on CodePen.

自動再生（Autoplay）

自動的にスライドを開始（再生）させる場合は autoplay を設定します

以下はループモードでスライドの間隔を2秒（2000ミリ秒）に設定して自動再生するれいです。 data-swiper-autoplay を指定して、最後のスライドは5秒遅延させています。

デフォルトで disableOnInteraction は true なので、ナビゲーションやページネーションをクリックしたり、スワイプするとスライドは停止します。

See the Pen AutoPlayデフォルト（最後スライドだけ遅延させる） by sakana27 (@haradaLupe) on CodePen.

メソッドやイベント

Autoplay のメソッドやイベントには以下のようなものがあります。

サンプルコード

Coverflowを使ったスライド

See the Pen RwpRvwz by sakana27 (@haradaLupe) on CodePen.

マウスホバー時にネクスト・プレビュのナビゲーションを出現させる

See the Pen RwpRvyW by sakana27 (@haradaLupe) on CodePen.

jQuery 不要 スライダープラグイン Swiper の使い方

jQuery不要でレスポンシブ及びタッチデバイス（スマホやタブレット）対応のスライダープラグインSwiper（バージョン7/8）の基本的な設定方法や使い方についての覚書（解説）です

www.webdesignleaves.com

ページネーションのデザインを変更する

See the Pen ページネーションのデザインを変更する by sakana27 (@haradaLupe) on CodePen.

ページネーションを「1 / 3」の形式にする

See the Pen ページネーション表示を「1 / 3」形式にする by sakana27 (@haradaLupe) on CodePen.

AutoPlayのサンプルコード

1枚目のスライドに戻ってから自動再生を終了する

See the Pen 最初のスライドに戻った時点で停止する by sakana27 (@haradaLupe) on CodePen.

画像以外のコンテンツも含んだスライダー

See the Pen RwpROqd by sakana27 (@haradaLupe) on CodePen.

文字をアニメーションで表示する

上記にCSSのコードを追加しただけ

See the Pen 文字をアニメーションで表示する by sakana27 (@haradaLupe) on CodePen.

前述の例では、要素に対してアニメーションを適用していましたが、以下のように要素にクラスを付与してそのクラスにアニメーションを適用したほうが管理しやすくなると思います。

アニメーションを適用する要素に個別のアニメーションのクラス（例 .from_top）を指定しておきます。HTML （スライド部分の抜粋）

<div class="swiper-slide">
  <div class="slide-img"><img src="images/swiper_img_01.jpg" alt=""></div>
  <div class="slide-content">
    <h1 class="from_top">Slide Title 01</h1><!-- アニメーション適用 -->
    <p>Lorem ipsum dolor sit amet, consectetur</p>
    <div class="caption">caption 01</div>
  </div>
</div>
<div class="swiper-slide">
  <div class="slide-img"><img src="images/swiper_img_02.jpg" alt=""></div>
  <div class="slide-content">
    <h2 class="from_left">Slide Title 02</h2><!-- アニメーション適用 -->
    <p class="from_right">Ipsa, quis ex repudiandae eum </p><!--アニメーション適用-->
    <div class="caption">caption 02</div>
  </div>
</div>
<div class="swiper-slide">
  <div class="slide-img"><img src="images/swiper_img_03.jpg" alt=""></div>
  <div class="slide-content">
    <h3 class="from_bottom">Slide Title 03</h3><!-- アニメーション適用 -->
    <p>Ullam rerum quasi libero esse </p>
    <div class="caption">caption 03</div>
  </div>
</div>

この例では以下のような4つの異なるアニメーションを用意しています。
CSS

@keyframes fromTop {
  0% {
    top: 0%;
    opacity: 0;
  }
  100% {
    top: 20%;
    opacity: 1;
  }
}  
  
@keyframes fromBottom {
  0% {
    top: 80%;
    opacity: 0;
  }
  100% {
    top: 20%;
    opacity: 1;
  }
}  
 
@keyframes fromleft {
  0% {
    left: 0%;
    opacity: 0;
  }
  100% {
    left: 50%;
    opacity: 1;
  }
}
  
@keyframes fromRight {
  0% {
    left: 100%;
    opacity: 0;
  }
  100% {
    left: 50%;
    opacity: 1;
  }
}
 
/* .from_top を指定した要素のアニメーション */
.swiper-slide-active .from_top {
  animation: fromTop .6s ease-in-out 0s 1 normal both;
} 
  
/* .from_bottom を指定した要素のアニメーション */
.swiper-slide-active .from_bottom {
  animation: fromBottom .6s ease-in-out 0s 1 normal both;
} 
  
/* .from_left を指定した要素のアニメーション */
.swiper-slide-active .from_left {
  animation: fromleft .6s ease-in-out 0s 1 normal both;
} 
  
/* .from_right を指定した要素のアニメーション */
.swiper-slide-active .from_right{
  animation: fromRight .6s ease-in-out .5s 1 normal both;
}