Swiper 実用的な6つのサンプルのサムネイル

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

 

前提作業

あらかじめ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にはいくつかオプションを指定しています。

オプション名 解説
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のオプションについて

オプションの説明をするため、サンプル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のオプションについて

オプション名 解説
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

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


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

JavaScript

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


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

 

サンプル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);

※参考URL

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

 

サンプル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 .thumbnail .swiper-wrappermargin-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となります。


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

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のオプションについて

オプション名 解説
control

初期値:undefined

Swiperインスタンス同士の同期を行います。

 

補足

Swiperには他にも膨大なオプションが用意されています。記事中のサンプル以外のレイアウトやオプションをお探しならSwiper公式のデモ集APIページもぜひご覧になってみてください。

 

まとめ

よく使用するレイアウトやオプションに絞ってSwiperで可能なスライダーのデザインパターンを紹介してみましたがいかがでしたでしょうか?ウェブサイトにスライダーを組み込むための読み物として、この記事がご参考になれば幸いです。

すべての人にインターネット
関連サービス