スライダープラグイン Swiper(v5)の使い方

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

以下で扱っている Swiper のバージョンは 5.3.1 です。

サポートされている PC のブラウザはモダンブラウザのみで、バージョン 5.0 からは IE は完全に対象外になっています。

作成日:2020年2月23日

Swiper の実装方法

Swiper を利用するには必要なファイルをダウンロードするか CDN で読み込みます。CDN で読み込むのが簡単です(本番環境でどちらを使うかは検討する必要があるかも知れません)。

CDN

CDN を利用すれば Swiper に必要なファイル(CSS と JavaScript)を簡単に読み込むことができます。

CSS(swiper.min.css)は <head>〜</head> 内で読み込み、JavaScript(swiper.min.js)は </body> の直前などで読み込みます。

<!DOCTYPE html>
<html lang="ja">
<head>
    ...
    <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
</head>
<body>
    ...
    <script src="https://unpkg.com/swiper/js/swiper.min.js"></script> 
</body>
</html>

バージョン5 から CDN の読み込み先が以下に変更になっています。

CSS
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
JavaScript
<script src="https://unpkg.com/swiper/js/swiper.js"></script>
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

ダウンロード

ダウンロードして使用することもできます。ダウンロードページ から最新版をダウンロードします。

ダウンロードしたファイルを展開すると以下のようなディレクトリ構成になっています。いろいろなファイルが入っていますが、必要なファイルは以下の2つ(CSS と JavaScript)です。

  • swiper.min.css
  • swiper.min.js

以下はバージョン 5.3.1 の例です。

Swiper の読み込み

「swiper.min.css」と「swiper.min.js」を環境に合わせて配置し、それらのファイルを読み込みます。

CSS(swiper.min.css)は <head>〜</head> 内で読み込み、JavaScript(swiper.min.js)は </body> の直前などで読み込みます。ファイルへのパスは環境に合わせて適宜変更します。

<!DOCTYPE html>
<html lang="ja">
<head>
    ...
    <link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
    ...
    <script src="path/to/swiper.min.js"></script>
</body>
</html>

スライダーの HTML

以下はスライダーの基本的なレイアウトの HTML の例です。3つのスライド(画像)をそれぞれ .swiper-slide 内に配置してスライダーで表示します。

以下のクラスの div 要素はスライダーの構造に必須の要素です。

  • swiper-container(スライダーのコンテナ)
  • swiper-wrapper(追加のラッパー)
  • swiper-slide(各スライドを入れる要素)
<!-- スライダーのメインコンテナの div 要素 -->
<div class="swiper-container"> 
  <!-- ラッパーの(スライドを囲む) div 要素 -->
  <div class="swiper-wrapper"> 
    <!-- それぞれのスライドの div 要素 -->
    <div class="swiper-slide"><img src="images/sample_01.png" alt=""></div>
    <div class="swiper-slide"><img src="images/sample_02.png" alt=""></div>
    <div class="swiper-slide"><img src="images/sample_03.png" alt=""></div>
  </div>
  <!-- ページネーションの div 要素 -->
  <div class="swiper-pagination"></div>

  <!-- ナビゲーションボタンの div 要素-->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- スクロールバーの div 要素 -->
  <div class="swiper-scrollbar"></div>
</div>

ページネーションやナビゲーションボタン、スクロールバーを表示するには以下のクラスの div 要素を記述します。また、同時にスライダーの初期化の際にそれらを表示するためのオプションを設定します。

  • swiper-pagination(ページネーション)
  • swiper-button-prev(「前へ」の矢印ボタン)
  • swiper-button-next(「次へ」の矢印ボタン)
  • swiper-scrollbar(スクロールバー)

スライダーの CSS

必要に応じて CSS でスタイルを指定します。

スライダーのサイズやナビゲーションなどのスタイルは CSS で設定することができます。

以下の例では、コンテナに最大幅(max-width)とマージン(margin)を指定して、スライダーのサイズと配置を指定しています。

環境に合わせて指定します。

.swiper-container {
  max-width: 500px;
  margin: 30px 0;
}

Swiper の CSS

スライダーやナビゲーションボタンなどにデフォルトで設定されているスタイルは CDN の https://unpkg.com/swiper/css/swiper.css やダウンロードした swiper.css で確認できます。

以下は swiper.css で設定されているデフォルトのスタイルの一部抜粋です。

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;
}

スライダーの初期化

スライダー(Swiper)の HTML が用意できたら、new 演算子と Swiper() メソッドを使って初期化する必要があります。

Swiper() メソッドにはスライダーのコンテナ要素(セレクタ)を指定し、必要なオプションを指定して実行します。Swiper() メソッドはスライダーのインスタンス(Swiper オブジェクト)を生成し返します。

初期化の書式
var スライダーインスタンス(変数) = new Swiper('セレクタ', {
    オプション(オブジェクト)
});

以下はスライダーのコンテナ要素のセレクタ .swiper-container を指定し、ナビゲーションのオプション(navigation)を指定してスライダーのインスタンスを生成して変数 mySwiper に格納する例です。

var mySwiper = new Swiper('.swiper-container', {
    navigation: {  //ナビゲーションのオプション(矢印ボタンの要素を指定)
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    }
});

初期化後は生成したインスタンスのメソッドやプロパティを使うことができます。

以下は生成したインスタンス mySwiper の on メソッド使ってスライドが変更された際のイベント slideChange にコンソールに何番目のスライドかを表示する処理を登録する例です。

mySwiper.on('slideChange', function () {
  console.log('現在のスライド番号: ' + (mySwiper.realIndex + 1));
});

初期化の JavaScript の記述は </body> タグの直前に記述するか、別ファイルに記述して </body> タグの直前で読み込みます。

<body>
  ...
  <script>
  var mySwiper = new Swiper ('.swiper-container', {
    // オプションの設定
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    ・・・必要なだけオプションを指定・・・
   
  })
  </script>
</body>

以下はオプションに loop(最後に達したら先頭に戻る)の設定や pagination(ページネーション)、navigation(ナビゲーションボタン)、scrollbar(スクロールバー)の設定を指定して初期化する例です。

<script>
var mySwiper = new Swiper ('.swiper-container', {
  // 以下にオプションを設定
  loop: true, //最後に達したら先頭に戻る

  //ページネーション表示の設定
  pagination: { 
    el: '.swiper-pagination', //ページネーションの要素
    type: 'bullets', //ページネーションの種類
    clickable: true, //クリックに反応させる
  },

  //ナビゲーションボタン(矢印)表示の設定
  navigation: { 
    nextEl: '.swiper-button-next', //「次へボタン」要素の指定
    prevEl: '.swiper-button-prev', //「前へボタン」要素の指定
  },

  //スクロールバー表示の設定
  scrollbar: { 
    el: '.swiper-scrollbar', //要素の指定
  },
})
</script> 

上記の初期化と HTML 及び CSS で以下のようなスライダーが表示されます。

HTML
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="images/sample_01.png" alt=""></div>
    <div class="swiper-slide"><img src="images/sample_02.png" alt=""></div>
    <div class="swiper-slide"><img src="images/sample_03.png" alt=""></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>
CSS
.swiper-container {
  max-width: 500px;
  margin: 30px 0;
}

パラメータ

Swiper には数多くのパラメータが用意されていて、それらを使ってスライダーをカスタマイズすることができます。以下はその中のほんの一部です。

すべてのパラメータは「Swiper Parameters」で確認することができます。

パラメータ データ型 デフォルト 説明
initialSlide number 0 開始するスライドのインデックスを指定(0 が1番目のスライド)
direction string 'horizontal' スライド方向を指定。'horizontal':水平(横)方向、'vertical':垂直(縦)方向。'vertical'を指定した場合はコンテナに height や max-height を指定。
speed number 300 スライドのスピードをミリ秒で指定
autoHeight boolean false true を指定すると現在のスライドに合わせて高さを自動的に調整
effect string 'slide' スライドのエフェクトを指定。指定できるエフェクトは "slide", "fade", "cube", "coverflow" "flip"
spaceBetween number 0 スライド間の余白を px で指定。要素にマージンを指定している場合、ナビゲーションが正常に機能しない可能性あり
slidesPerView number or 'auto' 1 一度に表示するスライドの数。auto を指定して同時に loop: true を設定する場合は、loopedSlides パラメータを指定する必要あり
slidesPerGroup number 1 同時にスライドさせるスライドの数
centeredSlides boolean false true を指定するとアクティブなスライドを中央に配置(通常アクティブなスライドは左端に配置)
loop boolean false true を指定するとスライドをループモードにします(最後に達したら先頭に戻る)。その場合、ループの構造上、前後に複製されたスライドが生成され、それらには swiper-slide-duplicate などのクラスが付与されます。
loopedSlides number null slidesPerView に auto を設定した場合、このパラメータで(前後に)複製するスライドの数を指定します。
breakpoints object ブレークポイント(画面サイズ)ごとにそれぞれ異なるパラメータを設定できます。
on object イベントの登録

以下はスライドのエフェクトを coverflow にし、ループを有効にしてスライドの最後に達したら先頭に戻るようにする例です。

slidesPerView:2 で表示するスライド数を指定しています。この例の場合は、centeredSlides も指定しているので、左右に半分ずつのスライドが表示されています。

また、デフォルトの bullets タイプのページネーションを表示しアイコンをクリックすると対応するスライドに移動し、デフォルトのナビゲーションボタンを表示させています。

var mySwiper = new Swiper ('#swiper01_param', {
  loop: true,  //ループ可能(ループモードを有効に)
  slidesPerView:2,  //スライドを2つ(分)表示
  centeredSlides : true,  //アクティブなスライドを中央に表示
  effect: 'coverflow',  //スライドのエフェクトを coverflow に
  
  pagination: {  //ページネーションを表示
    el: '.swiper-pagination',
    clickable: true,  //アイコンをクリックすると対応するスライドに移動
  },

  navigation: {  //ナビゲーションボタンを表示
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
})
Breakpoints

breakpoints パラメータを使うと、画面サイズごとに異なるパラメータを設定することができます。

但し、ブレークポイントごとに変更できるパラメータは slidesPerView, slidesPerGroup, spaceBetween, slidesPerColumn などに限定されていて、例えば loop や effect は設定できません。

以下は画面幅により一度に表示するスライドの数(slidesPerView)を変える例です。

var mySwiper = new Swiper ('#swiper01', {
  // デフォルトの設定
  slidesPerView: 1,
  spaceBetween: 0,
  
  // レスポンシブブレーポイント(画面幅による設定)
  breakpoints: {
    // 画面幅が 640px 以上の場合(window width >= 640px)
    640: {
      slidesPerView: 2,
      spaceBetween: 5
    },
    // 画面幅が 980px 以上の場合(window width >= 980px)
    980: {
      slidesPerView: 3,
      spaceBetween: 10
    }
  },
  
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  
})

イベント(Events)

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

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

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

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

on パラメータ

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

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

on メソッド

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

var mySwiper = new Swiper('.swiper-container', {
  // ...初期化の処理
};

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

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

var 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
イベント名 意味
slideChange スライドが遷移する(変わる)ときに発火
reachBeginning 最初のスライド(初期位置)に達したときに発火
reachEnd 最後のスライドに達したときに発火

プロパティやメソッド

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

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

プロパティの例
プロパティ名 意味
.width コンテナの幅
.height コンテナの高さ
.activeIndex アクティブなスライドのインデックス
.realIndex ループモードでの複製されたスライドを考慮したアクティブなスライドのインデックス
メソッドの例
メソッド名 意味
.slideNext(); 次のスライドへ移行
.slideTo(index); 指定したインデックスのスライドへ移行
.on(event, handler) イベントを登録
.off(event) 登録されたイベントを解除

コントロール

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

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

ページネーション(Pagination

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

ページネーションの HTML
<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 を指定して必要なパラメータを設定します。

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

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

pagination オブジェクトのパラメータ(一部抜粋)
パラメータ データ型 デフォルト 説明
el string null ページネーションの要素の CSS セレクタまたは HTML 要素
type string 'bullets' タイプ(表示形態)を指定。"bullets", "fraction", "progressbar" または "custom" を指定可能
bulletElement string 'span' type で bullets を指定した場合に、それぞれのアイコンを表示する HTML 要素を指定。
dynamicBullets boolean false スライドが多数ある場合に、ページネーションのすべてのアイコンを表示せずに dynamicMainBullets で指定した数のアイコンを表示。
dynamicMainBullets number 1 dynamicBullets が有効(true)の場合に表示するメインアイコンの数
clickable boolean false true を指定すると、ページネーションのアイコンをクリックすると対応するスライドを表示
renderBullet function null bullets タイプのページネーションのアイコンをカスタマイズする際に使用。引数にインデックスとアイコンの要素のクラス名(className)を取る関数を指定。function(index, className){ アイコンの HTML を返す }。CSS でスタイルを指定(サンプル参照)
bulletClass string 'swiper-pagination-bullet' bullets タイプのページネーションのアイコンに付与されるクラス
bulletActiveClass string 'swiper-pagination-bullet-active' bullets タイプのアクティブなページネーションのアイコンに付与されるクラス

以下は初期化の際に、type を bullets(デフォルト)、clickable を true に設定した場合に、出力されるページネーションの HTML の例です。

type が bullets なので swiper-pagination-bullets というクラスが付き、clickable を true に設定したので、swiper-pagination-clickable というクラスが付与されています。

各アイコンには swiper-pagination-bullet というクラスが付き、現在のスライドを示す(アクティブな)アイコンには swiper-pagination-bullet-active というクラスが追加されています。

<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets">
  <span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 1"></span>
  <span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 2"></span>
  <span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 3"></span>
</div>

以下はページネーションのデフォルトのスタイルの一部です。

swiper.css(抜粋)
.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}

.swiper-pagination-white {
  --swiper-pagination-color: #ffffff;
}
.swiper-pagination-black {
  --swiper-pagination-color: #000000;
}

/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 10px;
  left: 0;
  width: 100%;
}

/* Bullets */
.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 100%;
  background: #000;
  opacity: 0.2;  /* アクティブ以外の場合の透明度 */
}
button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}

.swiper-pagination-bullet-active {
  opacity: 1;    /* アクティブの場合の透明度 */
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

/* Progress */
.swiper-pagination-progressbar {
  background: rgba(0, 0, 0, 0.25);
  position: absolute;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transform-origin: left top;
}

以下は bullets タイプのページネーションをカスタマイズする例です。

パラメータ renderBullet の関数の中で className を使用すると自動的にデフォルトのクラスが付与されます。また、(index + 1) で何番目のスライドかを表示できます。

<script>
var swiper2 = new Swiper('#swiper02', {  //スライダーのコンテナ要素の id で初期化
  loop: true,
  
  pagination: {  //ページネーションを表示
    el: '.swiper-pagination',
    clickable: true,
    renderBullet: function (index, className) {
      return '<span class="' + className + '">' + (index + 1) + '</span>';
    },
  },
});
</script>
HTML
<div class="swiper-container" id="swiper02">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="images/sample_01.png" alt=""></div>
    <div class="swiper-slide"><img src="images/sample_02.png" alt=""></div>
    <div class="swiper-slide"><img src="images/sample_03.png" alt=""></div>
  </div>
  <div class="swiper-pagination"></div>
</div>

デフォルトの bullets タイプのアイコンとは異なる見栄えにするので、アクティブとそうでない場合のそれぞれのスタイルを適宜(上書き変更する部分を)指定します。

CSS
#swiper02 .swiper-pagination-bullet {
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  color:#000;
  background: #fff;
}
#swiper02 .swiper-pagination-bullet-active {
  color:#fff;
  background:#E59A0A;
}

以下は fraction タイプ(スライド番号/総数)のページネーションを表示する例です。

初期化
<script> 
var mySwiper3 = new Swiper ('#swiper03', {
  loop: true,

  pagination: {
    el: '.swiper-pagination',
    type: 'fraction',  //fraction タイプ
  },
  
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

})
</script> 
HTML
<div class="swiper-container" id="swiper03">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="images/sample_01.png" alt=""></div>
    <div class="swiper-slide"><img src="images/sample_02.png" alt=""></div>
    <div class="swiper-slide"><img src="images/sample_03.png" alt=""></div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev swiper-button-white"></div>
  <div class="swiper-button-next swiper-button-white"></div>
</div>

ページネーションの文字の色を CSS で白に指定しています。

#swiper03 .swiper-pagination-fraction {
  color: #fff;
}

以下は progressbar タイプのページネーションを表示する例です。

初期化
<script>
var mySwiper4 = new Swiper ('#swiper04', {
  loop: true,
  pagination: {
    el: '.swiper-pagination',
    type: 'progressbar',  //progressbar タイプ
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
})
</script>

デフォルトのスタイルを上書きして、背景色と表示位置を変更しています。

CSS
#swiper04 .swiper-pagination-progressbar {
  background: rgba(0, 0, 0, 0.25);
  top: auto;  /* 表示位置のデフォルトを変更 */
  bottom: 0 ; /* 表示位置を下に */
}
#swiper04 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: rgba(255,255,255,0.35);
}
スクロールバー(Scrollbar

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

スクロールバーの HTML
<div class="swiper-scrollbar"></div>

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

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

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

オブジェクトのパラメータ
パラメータ データ型 デフォルト 説明
el string null スクロールバーの要素の CSS セレクタまたは HTML 要素
hide boolean false true を指定するとユーザーが操作を終了すると自動的に非表示になる
draggable boolean false true を指定するとユーザーがスクロールバーをドラッグしてスライドを操作できる

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

swiper.css(抜粋)
/* 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 を設定したスクロールバーとナビゲーションを表示する例です。

HTML
<div class="swiper-container" id="swiper05">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="images/sample_01.png" alt=""></div>
    <div class="swiper-slide"><img src="images/sample_02.png" alt=""></div>
    <div class="swiper-slide"><img src="images/sample_03.png" alt=""></div>
  </div>
  <div class="swiper-button-prev swiper-button-white"></div>
  <div class="swiper-button-next swiper-button-white"></div>
  <div class="swiper-scrollbar"></div>
</div>
初期化
var mySwiper5 = new Swiper ('#swiper05', {
  scrollbar: {  //スクロールバーを表示
    el: '.swiper-scrollbar',
    draggable: true,
  },
  
  navigation: {  //ナビゲーションを表示
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  
})

以下は初期化で loop: true を指定した場合のスクロールバーの表示例です。

ループを有効にすると、最初と最後のスライドが複製され、左端が最後のスライドの複製、右端が最初のスライドの複製に対応するようになり、前述の例とスクロールバーの表示が異なります。

自動再生(Autoplay

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

autoplay のパラメータ
パラメータ データ型 デフォルト 説明
delay number 3000 スライド間の間隔をミリ秒で指定。この値を指定しない場合は自動再生は無効になります。この設定と異なる値を個別のスライドに設定する場合は、スライドの要素(.swiper-slide)に data-swiper-autoplay 属性を設定してミリ秒の値を指定します。
stopOnLastSlide boolean false true を指定すると、最後のスライドに達したら停止します。但し、ループモードでは無効です。
disableOnInteraction boolean true ユーザが操作したら自動再生をストップさせる設定です。false を指定すると操作があっても自動再生を継続します。
reverseDirection boolean false true を指定すると、逆方向に自動再生します。

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

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

var mySwiper6 = new Swiper ('#swiper06', {
  autoplay: {
    delay: 2000,
  },
  
  loop: true,
  
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
})
<div class="swiper-container" id="swiper06">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="images/sample_01.png" alt=""></div>
    <div class="swiper-slide"><img src="images/sample_02.png" alt=""></div>
    ・・・中略・・・
    <div class="swiper-slide" data-swiper-autoplay="6000"><img src="images/sample_06.png" alt=""></div>
  </div>
  <div class="swiper-button-prev swiper-button-white"></div>
  <div class="swiper-button-next swiper-button-white"></div>
  <div class="swiper-pagination swiper-pagination-white"></div>
</div>
最初のスライドに戻って停止

stopOnLastSlide のオプションの場合、自動再生後に最後のスライドで停止しますが、最初のスライドに戻った時点で停止する例です(動作を確認するにはページを再読み込みしてください)。

HTML
<div class="swiper-container" id="swiper07">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="images/sample_01.png" alt=""></div>
    <div class="swiper-slide"><img src="images/sample_02.png" alt=""></div>
    <div class="swiper-slide"><img src="images/sample_03.png" alt=""></div>
  </div>
  <div class="swiper-button-prev swiper-button-white"></div>
  <div class="swiper-button-next swiper-button-white"></div>
</div>

最初のスライドに戻るためにループモードにします。

on で最後のスライドに達した際に発火されるイベント reachEnd に、autoplay の自動再生を停止するメソッド autoplay.stop() を実行する処理を登録します。

または、自動再生(autoplay)を無効(false)にする処理を登録しても同様の結果になります。this は Swiper のインスタンスです。

var mySwiper7 = new Swiper ('#swiper07', {
  autoplay: {  //自動再生を有効に
    delay: 2000,
  },
  
  loop: true,  //ループモード

  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  
  on: {  
    reachEnd: function () {  //reachEnd イベントに以下を登録
      this.autoplay.stop();  //自動再生を停止
      // または自動再生を解除  this.autoplay = false; 
    },
  },
})
メソッドやイベント

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

Autoplay メソッド
メソッド 意味
.autoplay.start(); 自動再生を開始
.autoplay.stop(); 自動再生を停止
Autoplay イベント
イベント名 意味
autoplayStart 自動再生が開始されたときに発火
autoplayStop 自動再生が停止されたときに発火
autoplay 自動再生でスライドが遷移する(変わる)ときに発火

スライダーのサンプル

Swiper を使ったスライダーのサンプルです。

基本的なスライダー

以下は HTML コンテンツをスライドにした基本的なスライダーのサンプルです。

Slide Title 01

Lorem ipsum dolor sit amet, consectetur

caption 01

Slide Title 02

Ipsa, quis ex repudiandae eum

caption 02

Slide Title 03

Ullam rerum quasi libero esse

caption 03

サンプルを別ウィンドウで開く

画像だけではなく様々なコンテンツのスライダーを作成することができます。以下の例では画像の他にタイトルやキャプションなどもスライドにしています。

<div class="swiper-slide">〜 </div> にコンテンツを記述するだけです。

以下の例ではスタイルを適用しやすいように適宜クラスを指定した div 要素でコンテンツを囲んでいます(この例の場合は、不要なクラスもありますが)。

HTML
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="slide-img"><img src="images/img_01.jpg" alt=""></div>
      <div class="slide-content">
        <h1>Slide Title 01</h1>
        <p>Lorem ipsum dolor sit amet, consectetur</p>
        <div class="caption">caption 01</div>
      </div>
    </div><!-- end of .swiper-slide -->
    <div class="swiper-slide">
      <div class="slide-img"><img src="images/img_02.jpg" alt=""></div>
      <div class="slide-content">
        <h2>Slide Title 02</h2>
        <p>Ipsa, quis ex repudiandae eum </p>
        <div class="caption">caption 02</div>
      </div>
    </div><!-- end of .swiper-slide -->
    <div class="swiper-slide">
      <div class="slide-img"><img src="images/img_03.jpg" alt=""></div>
      <div class="slide-content">
        <h3>Slide Title 03</h3>
        <p>Ullam rerum quasi libero esse </p>
        <div class="caption">caption 03</div>
      </div>
    </div><!-- end of .swiper-slidet -->
  </div><!-- end of .swiper-wrapper -->
  <div class="swiper-pagination swiper-pagination-white"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div><!-- end of .swiper-container -->

画像以外のコンテンツは絶対配置(position: absolute)にして、配置しやすくしています。

CSS
.slide-img img {
  width: 100%;
}
.swiper-slide .slide-content h1, 
.swiper-slide .slide-content h2, 
.swiper-slide .slide-content h3 {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #FFF;
  font-size: 30px;
  text-shadow: 2px 2px rgba(0,0,0,0.3);
}
.swiper-slide .slide-content p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #FFF;
  text-shadow: .5px .5px rgba(0,0,0,0.6);
  margin: 0;
  padding: 0;
  font-size: 18px;
}
.swiper-slide .slide-content .caption {
  position: absolute;
  bottom: 30px;
  right: 30px;
  color: #FFF;
  font-size: 16px;
  background-color: rgba(0,127,127,0.5);
  padding: 3px 8px;
}

また、タイトルと p 要素は中央に配置するようにしています。

要素を上下左右の中央に配置には、以下のように絶対配置を使って left と top のプロパティに50%のオフセットを指定し、translate(-50%、-50%)で幅と高さの半分の値を引き戻す方法があります。

.swiper-slide .slide-content p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

初期化は画像のみのスライドと同じです。

JavaScript
<script>
  var mySwiper = new Swiper ('.swiper-container', {
    loop: true,
    
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },

    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

  })
</script>

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

以下は CSS アニメーションを使ってタイトルの文字をアニメーションで表示する例です。

Slide Title 01

Lorem ipsum dolor sit amet, consectetur

caption 01

Slide Title 02

Ipsa, quis ex repudiandae eum

caption 02

Slide Title 03

Ullam rerum quasi libero esse

caption 03

サンプルを別ウィンドウで開く

この例ではタイトル(h1, h2, h3 要素)の表示を CSS3 アニメーションで表示しています。

HTML と 初期化の JavaScript は前述の例と同じで、CSS に以下のアニメーションの記述を追加しているだけです。

異なる位置(top)と透明度(opacity)をキーフレームで設定してアニメーションで表示しています。

アニメーションを適用するのは、アクティブなスライドの要素なので「swiper-slide-active」クラスを使用します。

追加の CSS
@keyframes fromBottom {
  0% {
    top: 80%;
    opacity: 0;
  }
  100% {
    top: 20%;
    opacity: 1;
  }
}
.swiper-slide-active h1, 
.swiper-slide-active h2, 
.swiper-slide-active h3 {
  animation: fromBottom .6s ease-in-out 0s 1 normal both;
}

どのようなクラスが Swiper によって付与されているかはデベロッパーツールなどで確認することができます。

以下は Swiper によって出力される1枚目のスライドの部分の HTML です。

<div class="swiper-slide swiper-slide-active" data-swiper-slide-index="0" style="width: 500px;">
  <div class="slide-img"><img src="images/swiper_img_01.jpg" alt=""></div>
  <div class="slide-content">
    <h1 class="noindex">Slide Title 01</h1>
    <p>Lorem ipsum dolor sit amet, consectetur</p>
    <div class="caption">caption 01</div>
  </div>
</div>

例えば、この例の場合、ループモード(loop: true)にしているので Swiper によって、以下のような1つ前の画像が複製されています。

swiper-slide-duplicate というクラスが付与されているので複製されたスライドであることがわかります。

<div class="swiper-slide swiper-slide-duplicate swiper-slide-prev" data-swiper-slide-index="2" style="width: 500px;">
  <div class="slide-img"><img src="images/swiper_img_03.jpg" alt=""></div>
  <div class="slide-content">
    <h3 class="noindex">Slide Title 03</h3>
    <p>Ullam rerum quasi libero esse </p>
    <div class="caption">caption 03</div>
  </div>
</div>

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

アニメーションを適用する要素に個別のアニメーションのクラス(例 .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;
} 

Slide Title 01

Lorem ipsum dolor sit amet, consectetur

caption 01

Slide Title 02

Ipsa, quis ex repudiandae eum

caption 02

Slide Title 03

Ullam rerum quasi libero esse

caption 03

サンプルを別ウィンドウで開く

画像も文字と同じように追加してアニメーションを設定することができます。

Slide Title 01

Lorem ipsum dolor sit amet, consectetur

caption 01

Slide Title 02

Ipsa, quis ex repudiandae eum

caption 02

Slide Title 03

Ullam rerum quasi libero esse

caption 03
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 noindex">Slide Title 01</h1>
    <p>Lorem ipsum dolor sit amet, consectetur</p>
    <div class="caption">caption 01</div>
    <!-- 追加した画像の HTML -->
    <div class="animation_img from_right2"><img src="images/swiper_img_04.jpg" alt=""></div>
  </div>
</div>
追加の CSS
.swiper-slide .slide-content .animation_img {
  position: absolute;
  bottom: 30px;
  left: 30px;
  max-width: 120px;
  border-radius: 50%;
}
.swiper-slide .slide-content .animation_img img {
  border-radius: 50%;
  border: 2px solid #fff;
}

@keyframes fromRight2 {
  0% {
    left: 200px;
    opacity: 0;
  }
  100% {
    left: 30px;
    opacity: 1;
  }
}

.swiper-slide-active .from_right2 {
  animation: fromRight2 .3s ease-in-out .6s 1 normal both;
}

画像にアニメーション

文字と同様、画像にも CSS のアニメーションを簡単に付けることができます。

以下は前述の文字のアニメーションのサンプルに画像のアニメーションを追加したものです。

Swiper+CSSのみ!ズームアップしながらフェードインで切り替わるスライダーの実装方法」を参考にさせていただきました。

Slide Title 01

Lorem ipsum dolor sit amet, consectetur

caption 01

Slide Title 02

Ipsa, quis ex repudiandae eum

caption 02

Slide Title 03

Ullam rerum quasi libero esse

caption 03

サンプルを別ウィンドウで開く

HTML では、アニメーションを適用する画像の要素にアニメーションのクラス(.zoom, .translate1, .translate2)を指定します。

この例では、画像を囲む div 要素(.slide-img)にクラスを追加しています。

HTML(スライド部分の抜粋)
<div class="swiper-slide">
  <!-- アニメーション用クラス(以下は .zoom)を指定 -->
  <div class="slide-img zoom"><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 translate1"><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 translate2"><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>

この例では transform を使った3つのアニメーションを用意しています。

translate() を使う場合は、画像が移動するため画像の位置がずれてしまうので、scale() を使って画像を移動する分(以下の場合はおよその値)だけあらかじめ大きくしてあります。

追加した画像の CSS
@keyframes zoom {
  0% {
  transform: scale(1);
  }
  100% {
  transform: scale(1.1);
  }
}
.swiper-slide-active .zoom img {
  animation: zoom 6s linear 0s 1 normal both;
} 
  
@keyframes translate1 {
  0% {
  transform: scale(1.07) translate(0,0);
  }
  100% {
  transform: scale(1.07) translate(3%, 2%);
  }
}
  
.swiper-slide-active .translate1 img {
  animation: translate1 6s linear 0s 1 normal both;
} 
  
@keyframes translate2 {
  0% {
  transform: scale(1.05) translate(1%,2%);
  }
  100% {
  transform: scale(1.1) translate(-2%, -3%);
  }
}
 
.swiper-slide-active .translate2 img {
  animation: translate2 6s linear 0s 1 normal both;
} 
背景画像にアニメーション

画像要素(img)ではなく div 要素に背景画像(background-image)を指定する例です。

画像要素を使った前述の例とほぼ同様のことができますが、サイズの指定など少し面倒かも知れません。アニメーションなどは同じですが、このページの例の場合は画像の縦横比が異なります。

Slide Title 01

Lorem ipsum dolor sit amet, consectetur

caption 01

Slide Title 02

Ipsa, quis ex repudiandae eum

caption 02

Slide Title 03

Ullam rerum quasi libero esse

caption 03

サンプルを別ウィンドウで開く

この例の場合、背景画像にアニメーションを適用するので、.swiper-slide に背景画像を指定するのではなく、その子要素の .slide-img に背景画像を指定しています(そうしないと文字なども一緒にアニメーションが適用されてしまうため)。

HTML
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <!-- img 要素から背景画像(background-image)に変更-->
      <div class="slide-img zoom" style="background-image: url('images/swiper_img_01.jpg')"></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">
      <!-- img 要素から背景画像(background-image)に変更-->
      <div class="slide-img translate1" style="background-image: url('images/swiper_img_02.jpg')"></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">
      <!-- img 要素から背景画像(background-image)に変更-->
      <div class="slide-img translate2" style="background-image: url('images/swiper_img_03.jpg')"></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>
  </div><!-- end of .swiper-wrapper -->
  <div class="swiper-pagination swiper-pagination-white"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div><!-- end of .swiper-container -->

CSS では背景画像(height や background-size など)のプロパティを設定する必要があります。

CSS 追加及び変更部分の抜粋
/* .slide-img の背景画像の設定を追加 */
.slide-img {  /* 小画面 */
  height: 300px;
  background-size: cover;
  background-position:  center center;
  background-repeat: no-repeat;
  overflow:visible;
}
 
@media only screen and (min-width:651px) {  /* 中画面 */
  .slide-img {
    height: 450px;
  }
}
 
@media only screen and (min-width:961px) {  /* 大画面 */
  .slide-img  {
    height: 593px;
  }
}

/* 画像のアニメーション (変更部分にコメントで記載)*/

@keyframes zoom {
  0% {
  transform: scale(1);
  }
  100% {
  transform: scale(1.1);
  }
}
.swiper-slide-active .zoom { /* img を削除 */
  animation: zoom 6s linear 0s 1 normal both;
} 
 
@keyframes translate1 {
  0% {
  transform: scale(1.07) translate(0,0);
  }
  100% {
  transform: scale(1.07) translate(3%, 2%);
  }
}
  
.swiper-slide-active .translate1 { /* img を削除 */
  animation: translate1 6s linear 0s 1 normal both;
} 
  
@keyframes translate2 {
  0% {
  transform: scale(1.05) translate(1%,2%);
  }
  100% {
  transform: scale(1.1) translate(-2%, -3%);
  }
}
 
.swiper-slide-active .translate2 { /* img を削除 */
  animation: translate2 6s linear 0s 1 normal both;
}
background-position を使ったアニメーション

今までの例の場合、水平方向へのアニメーションは translate() を使用していましたが、その場合、位置がずれるので同時に scale() も使ってずれないように調整していました。

以下は background-position の値を変更するアニメーションを使う例です。但し、表示する画像の幅や高さを調整する必要があります。

Slide Title 01

Lorem ipsum dolor sit amet, consectetur

caption 01

Slide Title 02

Ipsa, quis ex repudiandae eum

caption 02

Slide Title 03

Ullam rerum quasi libero esse

caption 03

サンプルを別ウィンドウで開く

以下はこの例の HTML ですが前述の例との違いはアニメーションのクラス名が変わっていることだけです。

HTML(スライド部分の抜粋)
<div class="swiper-slide">
  <!-- アニメーションのクラス名(posChg1 など)が変わっているのみ -->
  <div class="slide-img posChg1" style="background-image: url('images/swiper_img_01.jpg')"></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 posChg2" style="background-image: url('images/swiper_img_02.jpg')"></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 posChg3" style="background-image: url('images/swiper_img_03.jpg')"></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>

CSS では表示される領域が画像の幅より小さくなるように調整しています。

表示される領域と画像の幅が同じ(または領域の方が大きい)場合、以下の background-position を使ったアニメーションは意味がありません(動かないです)。

CSS 変更及び追加部分の抜粋
.swiper-container{
  max-width: 720px; /* 最大幅を設定(背景画像より小さく設定) */
}
.slide-img {  
  /* 画像の幅が表示される領域(スライダー)の幅より小さくなるように高さで(割合を)調整 */
  height: 500px;   
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  overflow:visible;
}

/* background-position を使ったアニメーションの設定 */
@keyframes posChg1 {
  0% {
    background-position: 100% center;
    /*background-position: right center; と同じ*/
  }
  100% {
    background-position: center center;
  }
}
.swiper-slide-active .posChg1 {
  animation: posChg1 6s linear 0s 1 normal both;
} 
@keyframes posChg2 {
  0% {
    background-position: 70% center;
  }
  100% {
    background-position: 30% center;
  }
}
.swiper-slide-active .posChg2 {
  animation: posChg2 6s linear 0s 1 normal both;
} 
@keyframes posChg3 {
  0% {
    background-position: center center;
  }
  100% {
    background-position: 100% center;
    /*background-position: right center; と同じ*/
  }
}
.swiper-slide-active .posChg3 {
  animation: posChg3 6s linear 0s 1 normal both;
} 

以下は垂直方向のアニメーションの例です。スライダーの高さを小さくしています。

Slide Title 01

Lorem ipsum dolor sit amet, consectetur

caption 01

Slide Title 02

Ipsa, quis ex repudiandae eum

caption 02

Slide Title 03

Ullam rerum quasi libero esse

caption 03

サンプルを別ウィンドウで開く

CSS(Swiper sample 06との違いは高さの値とアニメーション部分のみ)
/* 変更部分 */
.swiper-container{
  max-width: 720px; 
}
.slide-img {  
  /* 表示される領域(スライダー)の高さが画像の高さより小さくなるように調整 */
  height: 360px;   
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  overflow:visible;
}

/* 垂直方向のアニメーション background-position の2つ目のパラメータで指定 */
@keyframes posChg1 {
  0% {
    background-position: center top;
    /*background-position: center 0%; と同じ*/ 
  }
  100% {
    background-position: center center;
  }
}
.swiper-slide-active .posChg1 {
  animation: posChg1 4s linear 0s 1 normal both;
} 
@keyframes posChg2 {
  0% {
    background-position: center 70%;
  }
  100% {
    background-position: center 30%;
  }
}
.swiper-slide-active .posChg2 {
  animation: posChg2 6s linear 0s 1 normal both;
} 
@keyframes posChg3 {
  0% {
    background-position: center center;
  }
  100% {
    background-position: center 100%;
    /*background-position: center bottom; と同じ*/
  }
}
.swiper-slide-active .posChg3 {
  animation: posChg3 2s linear 0s 1 normal both;
} 

画面幅によりグリッド/スライド表示

画面幅が一定(この例では 961px)以上の場合はグリッドで表示し、スマホなど画面幅が狭い場合はスライドで表示する例です。

レスポンシブ対応でjQuery不要の高機能スライダー Swiper(PC時はグリッド表示、スマホ時にスライドにする)」を参考にさせていただきました。

サンプルを別ウィンドウで開く

以下が HTML です。Swiper の構造を使ってマークアップしています。

HTML
<div class="container">
  <div class="swiper-container" id="mySlider">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="images/sample_01.png" alt=""></div>
      <div class="swiper-slide"><img src="images/sample_02.png" alt=""></div>
      <div class="swiper-slide"><img src="images/sample_03.png" alt=""></div>
      <div class="swiper-slide"><img src="images/sample_04.png" alt=""></div>
      <div class="swiper-slide"><img src="images/sample_05.png" alt=""></div>
      <div class="swiper-slide"><img src="images/sample_06.png" alt=""></div>
    </div><!-- end of .swiper-wrapper -->
    <div class="swiper-pagination swiper-pagination-white"></div>
    <div class="swiper-button-prev swiper-button-white"></div>
    <div class="swiper-button-next swiper-button-white"></div>
  </div><!-- end of .swiper-container -->
</div><!-- end of .container --> 

画面幅が 961px 以上の場合は Flexbox を使ってレイアウトし、また、ナビゲーションボタンやページネーションは display: none で非表示にしています。

CSS
.container {
  margin: auto;
  max-width: 1400px;
}
.swiper-slide img {
  width: 100%;
  height: auto;
}

@media(min-width: 961px) {
  .swiper-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .swiper-slide {
    max-width: 400px;
    padding: 0 5px;
  }
  .swiper-button-prev, .swiper-button-next, .swiper-pagination {
    display: none;
  }
}

初期化の関数 initSwiper() を作成して、画面幅が 961px 未満で且つ Swiper のインスタンスが生成されていない場合は初期化を実行してスライダーを表示します。

画面幅が 961px 以上で且つ Swiper のインスタンスが有効であれば(存在すれば)、.destroy() メソッドでインスタンスを破棄し、変数に null を代入します(判定用)。

destroy() は2つのパラメータを取り、1つ目(deleteInstance)はインスタンスを削除するかどうかの真偽値、2つ目(cleanStyles)はスライダーの要素(スライド、ラッパー、コンテナ)から不要になったスタイルなどを削除するかの真偽値です。両方ともデフォルトは true なので以下の場合、省略可能です。

また、resize イベントに登録して、画面幅に変更があった場合は、初期化の関数 initSwiper() を実行するようにしています。

JavaScript
<script>
  let mySwiperX;   //Swiperインスタンスを格納する変数の宣言
  let screenWidth;  //画面幅の値を格納する変数の宣言
  let swiperElement = document.getElementById("mySlider");  //コンテナ要素
  let options = {   //スライダーの初期化のオプション
    loop: true,
    centeredSlides : true,
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    slidesPerView: 1,
    spaceBetween: 0,
    breakpoints: {
      641: {
        slidesPerView: 2,
        spaceBetween: 10
      },
    }
  };
  
  function initSwiper() {
    if(swiperElement){ //コンテナ要素があれば
      screenWidth = window.innerWidth; //画面幅を取得
      if(screenWidth < 961 && !mySwiperX ) { 
        mySwiperX = new Swiper('#mySlider', options);  //スライダーの初期化
      } else if (screenWidth >= 961 && mySwiperX ) {
        mySwiperX.destroy(true, true);  //スライダーを破棄
        mySwiperX = null;
      }
    }
  }
  initSwiper();
  window.addEventListener('resize',initSwiper);
</script>

その他のサンプル

Flexbox を使ったサンプル

6枚の画像を1つのスライドに表示する例です。実用的かどうかは定かではありません。

この例の場合、指定する画像のサイズ及び画面幅により1行に表示される数が決まるので適宜調整します。

Flexbox を使ってスライドを中央に配置します(もっと良い方法があるかも知れません)。

サンプルを別ウィンドウで開く

HTML
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"> 
      <img src="images/sample_01.png" alt=""> 
      <img src="images/sample_02.png" alt=""> 
      <img src="images/sample_03.png" alt=""> 
      <img src="images/sample_04.png" alt=""> 
      <img src="images/sample_05.png" alt=""> 
      <img src="images/sample_06.png" alt=""> 
    </div>
    <div class="swiper-slide"> 
      <img src="images/sample_01.png" alt=""> 
      ・・・中略・・・
      <img src="images/sample_06.png" alt=""> 
    </div>
    <div class="swiper-slide"> 
      <img src="images/sample_01.png" alt=""> 
      ・・・中略・・・
      <img src="images/sample_06.png" alt=""> 
    </div>
  </div>
  <!-- end of .swiper-wrapper -->
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>
<!-- end of .swiper-container.flex -->
CSS
.swiper-slide {
  /* 中央寄せするための設定 */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.swiper-slide img {
  width: 100%;
  max-width: 160px; /* 画面幅とこの幅により表示枚数が決まる */
  margin: 10px;
}
.swiper-pagination {
  /* pagination の位置調整 */
  bottom: -5px;
}
.swiper-container{
  /* pagination の位置調整 */
  padding-bottom: 20px;
}
JavaScript
var swiper = new Swiper('.swiper-container', {
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});
グリッドを使ったサンプル

Bootstrap のグリッドを使って画面幅により異なる行(列)の画像を表示する例です。

前述の例と同じく6枚の画像を1つのスライドに表示する例ですが、こちらの方が制御しやすいかと思います。

Bootstrap の CSS を読み込む必要があります。

サンプルを別ウィンドウで開く

Bootstrap のグリッドを使うので、必要に応じて container クラスを指定し(以下の例ではスライダのコンテナに指定)、<div class="row">〜</div> に画像を配置してレスポンシブグリッドのクラス(ol-lg-4 など)を指定します。

HTML
<head>
<meta charset="utf-8">
・・・中略・・・
<link rel="stylesheet" href="bootstrap.min.css"><!-- bootstrap の読み込み -->
<link rel="stylesheet" href="swiper.min.css">
</head>
・・・中略・・・
<div class="swiper-container container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="row">
        <div class="col-6 col-lg-4"><img src="images/sample_01.png" alt=""></div>
        <div class="col-6 col-lg-4"><img src="images/sample_02.png" alt=""></div>
        <div class="col-6 col-lg-4"><img src="images/sample_03.png" alt=""></div>
        <div class="col-6 col-lg-4"><img src="images/sample_04.png" alt=""></div>
        <div class="col-6 col-lg-4"><img src="images/sample_05.png" alt=""></div>
        <div class="col-6 col-lg-4"><img src="images/sample_06.png" alt=""></div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="row">
        <div class="col-6 col-lg-4"><img src="images/sample_01.png" alt=""></div>
        ・・・中略・・・
        <div class="col-6 col-lg-4"><img src="images/sample_06.png" alt=""></div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="row">
        <div class="col-6 col-lg-4"><img src="images/sample_01.png" alt=""></div>
        ・・・中略・・・
        <div class="col-6 col-lg-4"><img src="images/sample_06.png" alt=""></div>
      </div>
    </div>
  </div>
  <!-- end of .swiper-wrapper -->
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev swiper-button-black"></div>
  <div class="swiper-button-next swiper-button-black"></div>
</div>
<!-- end of .swiper-container.flex -->
CSS
.swiper-slide img {
  width: 100%;
  margin: 10px 0;
}
JavaScript
var swiper= new Swiper('.swiper-container', {
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});