Swiperを使用した基本的なスライダー実装から応用まで！実用的な6つのサンプル

2022/11/25 12:00

パワフルで拡張性のあるJavaScriptのスライダー『Swiper』。

以前にもSwiperの記事『スライダープラグイン「Swiper」で前後の画像を表示する』を投稿しましたが、今回はシンプルなものから応用まで、実用的な6つのサンプルを用意して、より深くJavaScriptのスライダー『Swiper』の解説をしたいと思います。

スライダープラグイン「Swiper」で前後の画像を表示する

数あるJavaScriptの『Swiper』は、jQueryなしで動作し、動作が軽量。また膨大なオプションが用意されており、非常にカスタマイズ性に優れています。

前提作業

あらかじめSwiperの構成ファイルをダウンロードして配置します。

以前の記事の『Swiperの実装』に記載している手順の1から4までを行いましょう。

サンプル01 画像スライダー

まずはよくある画像スライダーを実装してみます。

今回は実際の動作サンプルをダウンロードできるようにご用意しています。すぐに確認することができますので、初期設定が面倒であれば以下のリンクからサンプルファイルをダウンロードしてご使用ください。

動作サンプルはこちら

サンプル01 HTML・CSS・JavaScript

サンプル01は以下のHTML・CSS・JavaScriptを適用しています。

.swiper-container内におけるHTMLの構造が、Swiperを利用する上でベースになります。

HTML


<div class="sample sample01">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="./img/img01.png"></div>
      <div class="swiper-slide"><img src="./img/img02.png"></div>
      <div class="swiper-slide"><img src="./img/img03.png"></div>
    </div>

    <div class="swiper-pagination"></div>
      
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</div>

CSS


/**
 * スライダーの幅を指定しているだけ
 */
.c-container {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  max-width: 1000px;
  padding: 0 15px;
}

JavaScript


window.addEventListener('DOMContentLoaded', function() {
  var swiper = new Swiper('.sample01 .swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    loop: true
  });
}, false);

サンプル01ダウンロード

サンプル01 オプションについて

何も指定しなかった場合、味気ないスライダーとなってしまうので、サンプル01はいくつかオプションを指定しています。

オプション名	解説
pagination	初期値：なし (null) スライド中央下部にある丸いページネーションを表示します。初めからCSSクラスの`.swiper-pagination`が用意されています。動作させるにはJavaScriptの初期設定にCSSクラスを指定してHTMLも追加する必要があります。
paginationClickable	初期値：false ページネーションをクリックしてスライドが動作するように指定するオプション。`pagination`が動作していなければ設定しても意味はありません。
nextButton	初期値：なし (null) 次のスライドを表示させるためのボタンをクリックで動作可能にします。始めからCSSクラス`.swiper-button-next`が用意されていますので、divに指定してあげれば矢印を表示することができます。
prevButton	初期値：なし (null) 前のスライドを表示させるためのボタンをクリックで動作可能にします。始めからCSSクラス`.swiper-button-prev`が用意されています。
loop	初期値：false 最後のスライドが表示された状態で、次の画像を表示させる動作をした際に、最初の画像へ戻るループ処理を実装します。

サンプル02 コンテンツスライダー

Swiperは画像だけでなくテキストから動画まで、様々なコンテンツの表示に対応しております。

いくつか実用的なオプションも取り入れながら、次はコンテンツスライダーの実装を行ってみます。

動作サンプルはこちら

サンプル02 HTML・CSS・JavaScript

サンプル02ソースコードです。HTML・CSSに関してはコンテンツのレイアウトや矢印のアイコン、ページネーションのカラー変更のスタイルとなります。

モバイルでは矢印アイコンが非表示になるように設定しました。

HTML


<div class="sample sample02">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="sample02-inner">
          <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、<br class="u-d-n u-d-i-md">うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
        </div>
      </div>

      <div class="swiper-slide">
        <div class="sample02-inner">
          <p>またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。</p>
        </div>
      </div>

      <div class="swiper-slide">
        <div class="sample02-inner">
          <p>では、わたくしはいつかの小さなみだしをつけながら、<br class="u-d-n u-d-i-md">しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。</p>
        </div>
      </div>
    </div>
      
    <div class="swiper-button-prev">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 44">
        <path class="c-arrow c-arrow-prev" d="M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z" />
      </svg>
    </div>
    <div class="swiper-button-next">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 44">
        <path class="c-arrow c-arrow-next" d="M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z" />
      </svg>
    </div>

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

CSS


.sample02 .swiper-wrapper {
  align-items: stretch;
}

.sample02 .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  padding-bottom: 25px;
}

.sample02 .sample02-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.sample02 .swiper-button-prev,
.sample02 .swiper-button-next {
  display: none;
  width: 20px;
  height: 32.58px;
  fill: #666;
  stroke: none;
  stroke-width: 0;
  background-image: none;
  z-index: 10000;
}

.sample02 .swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 0;
}

.sample02 .swiper-pagination-bullet-active {
  background: #666;
}

@media (min-width: 768px) {
  .sample02 .swiper-slide {
    padding: 50px;
  }

  .sample02 .swiper-button-prev,
  .sample02 .swiper-button-next {
    display: block;
  }

  .sample02 .swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: 10px;
  }
}

JavaScript


window.addEventListener('DOMContentLoaded', function() {
  var swiper = new Swiper('.sample02 .swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    loop: true,
    speed: 1000,
    autoplay: 3000,
    spaceBetween: 10,
    effect: 'coverflow'
  });
}, false);

サンプル02ダウンロード

サンプル02 オプションについて

オプションの説明をするため、サンプル01オプションをベースにさらにいくつかオプションを追加してみました。

適宜オプションを付け加えたり省くことで、Swiperは簡単に動作を変更することができます。

オプション名	解説
speed	初期値：300 (ms) スライドが切り替わる際の速さを設定します。サンプル02は1000ms(1秒)に指定してゆっくり切り替わるようにしてみました。
autoplay	初期値：なし autoplayを追加すると自動でスライドが切り替わるようになります。切り替わる時間はオプションの後に値をmsの単位で記述してください。サンプル03は3000ms、つまり3秒に指定しています。
spaceBetween	初期値：0 スライド間に隙間を設定することができます。単位はpxです。サンプル02は10pxを指定しています。
effect	初期値：slide スライドのエフェクトを『`slide`』『`fade`』『`cube`』『`coverflow`』『`flip`』の中から指定できます。サンプル02は『`coverflow`』を適用してみました。エフェクトの種類によってはスタイルシートの修正を行う必要があります。

サンプル03 レスポンシブなカルーセル

PCでの閲覧時は3カラムのカルーセル。

モバイルでは左右の画像が半分表示される可変スライダーのサンプルです。

動作サンプルはこちら

サンプル03 HTML・CSS・JavaScript

HTML


<div class="sample sample03">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="./img/img01.png"></div>
      <div class="swiper-slide"><img src="./img/img02.png"></div>
      <div class="swiper-slide"><img src="./img/img03.png"></div>
    </div>
      
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

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

CSS


.swiper-slide {
  cursor: pointer;
}

.sample03 .swiper-button-prev,
.sample03 .swiper-button-next {
  display: none;
}

@media (min-width: 768px) {
  .sample03 .swiper-button-prev,
  .sample03 .swiper-button-next {
    display: block;
  }
}

JavaScript


window.addEventListener('DOMContentLoaded', function() {
  var swiper03 = new Swiper('.sample03 .swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    loop: true,
    slidesPerView: 3,
    centeredSlides : true,
    slideToClickedSlide: true,
    spaceBetween: 10,
    breakpoints: {
      543: {
        slidesPerView: 2
      }
    }
  });
}, false);

サンプル03ダウンロード

サンプル03 オプションについて

オプション名	解説
slidesPerView	初期値：1 1画面で見えるスライド数を設定できます。
centeredSlides	初期値：false アクティブなスライドの位置を真ん中に持ってくるか否かを設定できます。サンプルではこのオプションを`true`にすることで、アクティブな画像を中央に表示させています。
slideToClickedSlide	初期値：false スライド画像をクリックすると該当するスライド画像をアクティブにするか否かを設定できます。1画面で複数画像が表示されていないと意味を持たないオプションです。
breakpoints	ブラウザサイズごとにパラメータを変更したい際に使用するオプションです。サンプルでは`543`と設定し、ブラウザサイズが543px以下の場合はslidesPerViewが2になるように設定しています。

サンプル04 スライドのタイミングでコンテンツがアニメーションするスライダー

スライドのタイミングに合わせて動作するアニメーションもCallback関数を使用することにより比較的簡単に実装できます。

動作サンプルはこちら

サンプル04 HTML・CSS・JavaScript

HTML


<div class="sample sample04">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <p class="catch01">わたくしといふ現象は</p>
      </div>
      <div class="swiper-slide">
        <p class="catch02">仮定された有機交流電燈の</p>
      </div>
      <div class="swiper-slide">
        <p class="catch03">ひとつの青い照明です</p>
      </div>
    </div>
      
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

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

CSS


.sample04 .swiper-slide {
  cursor: pointer;
}

.sample04 .swiper-slide {
  height: 200px;
  display: flex;
  justify-content: center;
}

.sample04 .swiper-slide p {
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateY(10px);
}

.sample04 .swiper-slide .is-anim {
  transition: .6s cubic-bezier(0.23, 1, 0.32, 1);
  opacity: 1;
  transform: translateY(0px);
}

.sample04 .swiper-button-prev,
.sample04 .swiper-button-next {
  display: none;
}

@media (min-width: 768px) {
  .sample04 .swiper-button-prev,
  .sample04 .swiper-button-next {
    display: block;
  }
}

サンプルではCSSのtransitionとtransformで簡単に作成しています。

JavaScript


var swiper04Anim = function() {
  var el = document.querySelector('.sample04 .swiper-slide-active p');
  var anim = document.querySelectorAll('.is-anim');

  for (var i = 0; i < anim.length; i++ ) {
    anim[i].classList.remove('is-anim');
  }
  el.classList.add('is-anim');
};

window.addEventListener('DOMContentLoaded', function() {
  var swiper04 = new Swiper('.sample04 .swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    loop: true,
    onInit: function() {
      swiper04Anim();
    },
    onSlideChangeEnd: function() {
      swiper04Anim();
    }
  });
}, false);

アニメーションを実行するためにis-animクラスを動的に追加・削除するswiper04Anim関数を用意しています。swiper04Animをコールバックで呼び出し、Swiperの操作と関数の発火タイミングを合わせています。

サンプル04ダウンロード

サンプル04 オプションについて

オプション名	解説
onInit	初期値：300 (ms) Callback。スライダーの初期設定が終わったタイミングで実行します。
onSlideChangeEnd	初期値：なし Callback。スライダーが変わった後のタイミングで実行します。

サンプル05 PCで2カラム、モバイルではカルーセルに変化するスライダー

PCでは静的なカラムレイアウトにしたいですが、CSSだけではモバイル時に1カラムになってしまい縦に長く表示されてしまうことが多々あります。

しかしSwiperをうまく使うことにより、PCでは静的な2カラムのレイアウト、モバイルではカルーセルに変化する可変スライダーとして、CSSだけではできない改善策を実装することができます。

動作サンプルはこちら

サンプル05 HTML・CSS・JavaScript

HTML


<div class="sample sample05">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="./img/img01.png"></div>
      <div class="swiper-slide"><img src="./img/img02.png"></div>
      <div class="swiper-slide"><img src="./img/img03.png"></div>
      <div class="swiper-slide"><img src="./img/img04.png"></div>
    </div>
      
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

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

CSS


@media (min-width: 920px) {
  .sample05 .swiper-wrapper {
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .sample05 .swiper-slide {
    width: 50%;
    padding: 10px;
  }
  .sample05 .swiper-button-prev,
  .sample05 .swiper-button-next,
  .sample05 .swiper-pagination {
    display: none;
  }
}

JavaScript

まずブラウザの横幅を取得する関数を用意します。


var scaleWindowW = function() {
  var w = (window.innerWidth || document.documentElement.clientWidth || 0);
  return w;
};

次にSwiperに用意されているメソッド『destroy()』を使用して、ブラウザのサイズによりSwiperの処理を止めてレイアウトを制御します。

サンプルでは920px未満でSwiperが動作、920px以上でSwiperが動作を停止するように設定しています。


var scaleWindowW = function() {
  var w = (window.innerWidth || document.documentElement.clientWidth || 0);
  return w;
};

window.addEventListener('DOMContentLoaded', function() {
  var swiper05 = undefined;
  var swiperEl = document.querySelector('.sample05 .swiper-container');

  if (scaleWindowW() < 920 && swiper05 == undefined) {
    swiper05 = new Swiper(swiperEl, {
      pagination: '.swiper-pagination',
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev',
      loop: true,
      slidesPerView: 2,
      centeredSlides : true
    });
  } else if (scaleWindowW() >= 920 && swiper05 != undefined) {
    swiper05.destroy();
    swiper05 = undefined;
    // 処理...
  }
}, false);

しかしSwiperの処理を止めただけでは、SwiperによりHTMLへ追加されたインラインCSSは削除されないため、920px未満で変数swiper05がundefinedの場合に、インラインCSSを削除する記述を追加しています。


// 処理...
var swiperWrapper = document.getElementsByClassName('swiper-wrapper');
var swiperSlide = document.getElementsByClassName('swiper-slide');

// 処理...
} else if (scaleWindowW() >= 920 && swiper05 != undefined) {
  swiper05.destroy();
  swiper05 = undefined;
  for ( var i = 0; i < swiperWrapper.length; i++ ) {
    swiperWrapper[i].removeAttribute('style');
  }
  for ( var i =0; i < swiperSlide.length; i++ ) {
    swiperSlide[i].removeAttribute('style');
  }
}
// 処理...

またブラウザのリサイズにも対応できるように、リサイズされるたびにinitSwiper()が実行されるようにイベントを登録します。

JavaScriptの全体像は以下のようになります。


var scaleWindowW = function() {
  var w = (window.innerWidth || document.documentElement.clientWidth || 0);
  return w;
};

window.addEventListener('DOMContentLoaded', function() {
  var swiper05 = undefined;
  var swiperEl = document.querySelector('.sample05 .swiper-container');
  var swiperWrapper = document.getElementsByClassName('swiper-wrapper');
  var swiperSlide = document.getElementsByClassName('swiper-slide');

  var initSwiper = function() {
    if (scaleWindowW() < 920 && swiper05 == undefined) {
      swiper05 = new Swiper(swiperEl, {
        pagination: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        loop: true,
        slidesPerView: 2,
        centeredSlides : true
      });
      
    } else if (scaleWindowW() >= 920 && swiper05 != undefined) {
      swiper05.destroy();
      swiper05 = undefined;
      for ( var i = 0; i < swiperWrapper.length; i++ ) {
        swiperWrapper[i].removeAttribute('style');
      }
      for ( var i =0; i < swiperSlide.length; i++ ) {
        swiperSlide[i].removeAttribute('style');
      }
    }
  }
  initSwiper();

  window.addEventListener('resize',initSwiper);
}, false);

参考:レスポンシブ対応でjQuery不要の高機能スライダー「Swiper」 | will STYLE Inc.｜神戸にあるウェブ制作会社

サンプル05ダウンロード

サンプル05 オプションについて

オプション名	解説
.destroy()	Swiperに用意されたメソッドの一つ。 .destroy()はSwiperの処理を削除するメソッドです。

サンプル06 サムネイル付きスライダー

最後にサムネイル付きのスライダーをSwiperを使って実装してみます。

Swiperの公式には、サムネイルが中央表示されたサンプルは存在しますが、初期状態でサムネイルが左側に表示されるサンプルはなかったので、その辺りの実装手順を詳しく解説します。

動作サンプルはこちら

サンプル06 HTML・CSS・JavaScript

HTML

今までのサンプルでは.swiper-containerは1つでしたが、このサンプルでは2つ使用します。


<div class="sample sample06">
  <div class="swiper-container main">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="./img/img01.png"></div>
      <div class="swiper-slide"><img src="./img/img02.png"></div>
      <div class="swiper-slide"><img src="./img/img03.png"></div>
      <div class="swiper-slide"><img src="./img/img04.png"></div>
    </div>
    
    <div class="swiper-pagination"></div>

    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>

  <div class="swiper-container thumbnail">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="./img/img01.png"></div>
      <div class="swiper-slide"><img src="./img/img02.png"></div>
      <div class="swiper-slide"><img src="./img/img03.png"></div>
      <div class="swiper-slide"><img src="./img/img04.png"></div>
    </div>
  </div>
</div>

CSS


.sample06 .main {
  margin-bottom: 10px;
}

.sample06 .thumbnail .swiper-slide {
  cursor: pointer;
  opacity: .7;
}

.sample06 .thumbnail .swiper-slide-active {
  opacity: 1;
}

.sample06 .thumbnail .swiper-wrapper {
  margin-left: calc(-37.5% - 5px);
}

.sample06 .thumbnail .swiper-wrapperにmargin-left: calc(-37.5% – 5px);が掛かっていますが、これはメインスライダーのサムネイルがデフォルトだと中央に表示されるものを左側に寄せるための記述です。

ちなみにサムネイルも真ん中に表示したい場合はスタイルを省いていただければOKです。

※centeredSlidesをfalseにすればできそうですが、スライダーを同期した場合は正常に動作しない不具合(仕様？)が存在するため、CSSでの対応となります。

calc内の値を求める式は以下となります。

サムネイルの表示数が偶数の場合
– (((100 / 表示数) / 2) + (100 / 表示数) % ) – ((spaceBetween値 / 2) px)
スライダー数が奇数の場合
(100 / 表示数) – (spaceBetween値 / 2)

※便宜上、式中ではサムネイルの表示数を『表示数』と表します。

サンプルはサムネイルの表示数が4枚(偶数)でspaceBetweenが10ですので、計算式に当てはめると- (((100 / 4) / 2) + (100/4))% -(10 / 2)px。

どんどん計算していき-(12.5 + 25)% – 5px。

つまり-37.5% – 5pxとなります。

JavaScript

インスタンスの作成も2つ分用意します。

そしてこの2つを同期させる処理が以下の記述となります。


swiper06Main.params.control = swiper06Thumb;
swiper06Thumb.params.control = swiper06Main;

JavaScriptの全体像は以下のようになります。


window.addEventListener('DOMContentLoaded', function() {
  var swiper06Main = new Swiper ('.sample06 .main', {
    pagination: '.swiper-pagination',
    paginationClickable: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    spaceBetween: 10,
  })

  var swiper06Thumb = new Swiper('.sample06 .thumbnail', {
    spaceBetween: 10,
    centeredSlides: true,
    slidesPerView: 4,
    slideToClickedSlide: true
  });
  swiper06Main.params.control = swiper06Thumb;
  swiper06Thumb.params.control = swiper06Main;
}, false);

サンプル06ダウンロード