【最新版】Swiper.js の使い方と便利なオプションについて解説

レスポンシブなスライダーを手軽に実装できる「Swiper.js」というJavaScriptライブラリはご存知ですか？

JQueryなしでも動くことから高速で軽量なスライダーとして、様々なサイトで使われている人気のライブラリです。

他にもスライダー実装ができるライブラリはありますが、Swiperは多彩なオプションによって手軽にカスタマイズができる拡張性と、日本語で書かれた解説記事の情報も多いことから初心者でも扱いやすいところがポイントです。

今回はそんな「Swiper.js」の基本的な使い方と便利なオプション機能について詳しく解説していきます。

コーディングお役立ちツール

Swiper.js とは何か

Swiper はレスポンシブなスライダーを手軽に実装できるMITライセンスのJavaScript製ライブラリです。

また、スマホマートフォン(AndroidまたはiOS)環境にも非常に優れたパフォーマンスを発揮できるよう設計されており、ネイティブアプリのようなスムーズな操作性が実現できるので、モバイルWebサイトやモバイルWebアプリに最適なライブラリと言えます。

さらにスライドアニメーションに視差効果や遷移効果を付け加えるなどの多彩なオプション機能があるので、サイトのビジュアルにエフェクト効果をつけてみたいという人にはとてもオススメです。

実際に「Adobe」「BMW」「ディズニー」などの有名企業のコンテンツにも使用された実績があることから、高い信頼性があることが分かります。

Examples はコチラ

Swiper の使い方

Swiperの使い方は非常に簡単で、数行の「HTML」「CSS」「JavaScript」のコードを貼り付けるだけで実行できるので、入門したての人にとっても非常に導入しやすくなっています。

また、インストール方法はCDNを使う場合と、アセットをダウンロードする方法とNPMを使って入手する方法の3つのやり方がありますので、ご自身の開発環境に合わせて選びましょう。

初心者にオススメなのはアセットからダウンロードするか、CDNを使う方法です。

今回の解説では、こちらの2つの方法について解説していきます。

Swiper.min.js とCSSのダウンロード

アセットからダウンロードする場合は、こちらのサイトから「swiper-bundle.min.js」と「swiper-bundle.min.css」をコピーして入手しましょう。

あとは以下のように「header」タグ内に「script」と「link」の2つのタグを埋め込みソースを読み込めば使うことができます。

<link rel="stylesheet" href="swiper-bundle.css" />

<script src="swiper-bundle.min.js"></script>

CDNを利用する場合

一番簡単な使い方としてはCDNを使う方法があります。

使い方はとても簡単で以下のコードをヘッダー内にコピペするだけで手軽にSwiper を実装できます。

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

基本的なスライダーの実装 Demo(デモ)

Swiper.js でスライダーを実行するためのJavaScriptとCSSは準備できましたか？

ここからはダウンロードした「swiper-bundle.min.js」と「swiper-bundle.min.css」を使って、もっとも基本的なスライダーを実装していきます。

HTMLのファイルに以下のコードをコピペするだけで簡単にスライダーを実装できます。

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

.swiper-container {
  width: 600px;
  height: 300px;
  line-height: 300px;
  text-align: center;
}

const swiper = new Swiper('.swiper-container', {
  loop: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  }
});

スライダーの実装デモはコチラ

Swiper の便利なオプション機能

Swiper.js には便利なオプション機能が豊富にあるため、色々な開発ニーズに対応することができます。

基本的なオプション以外にもユーザーイベントに応じて表示を変更したり、立体感や臨場感を出すための多彩なエフェクトも用意されているので試しに使ってみるのも面白いかもしれません。

autoplay (自動再生)

autoplay はスライダーを自動起動させるかの設定をすることができます。

値には真偽値を代入し、「false」の場合はユーザーのイベントを待つ形になり、「true」の場合は自動でスライドが動くようになります。

const swiper = new Swiper('.swiper-container', {
 autoplay: true
});

delay (遅延)

delay はスライダーが次のスライドまでに何秒待つかの時間を指定できます。

時間の単位はミリ秒で指定でき1秒の場合は「1000」、10秒の場合は「10000」と記述します。

const swiper = new Swiper('.swiper-container', {
 autoplay: {
   delay: 2500,
 }
});

loop (無限ループ)

loop はスライダーのスライドが最後まで来ると、また最初のスライドに戻る設定ができます。

代入する値は真偽値の「true」または「false」です。

const swiper = new Swiper('.swiper-container', {
 loop: true
});

on init (初期化)

on init はスライダーを初期化(初回実行)された際に発火するイベントです。

例えば、以下のようにスライダーが初回実行される時に何らかの関数を挟むこともできます。

const swiper = new Swiper('.swiper-container', {
  on: {
    init: function () {
      console.log('Hello Swiper!!');
    }
  }
});

on slideChange (スライド毎)

on slideChange はスライダーのスライドが動くたびに実行されるイベントです。

以下の例ではスライドするたびに「console.log('Swiper changed!!')」を実行するようにしています。

const swiper = new Swiper('.swiper-container', {
});
swiper.on('slideChange', function () {
  console.log('Swiper changed!!');
});

Effect Cube (キューブエフェクト)

Effect Cube はスライドが立方体の形になり、3D回転を繰り返すエフェクトです。

一見重そうな処理に思えますが、スマートフォンでもスムーズに動かすことができます。

const swiper = new Swiper('.swiper-container', {
  loop: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  effect: 'cube'
});

Effect Cube のデモはコチラ

Effect Coverflow (カバーフローエフェクト)

Effect Coverflow は写真やアルバムジャケットを視覚的にめくるようなエフェクト表現のことを言います。

アップル社のコンテンツでよく使われていたアニメーション表現で、3DのグラフィカルなUIを構築する場合などに向いています。

const swiper = new Swiper('.swiper-container', {
  loop: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  effect: 'coverflow'
});

Effect Coverflow のデモはコチラ

Effect Flip (フリップエフェクト)

Effect Flip はスライダーを1枚のカードのように見立てて回転しながら変化していくエフェクト手法です。

動きがシンプルなので、少しだけサイトにアクセントを付けたい場合などに向いているかもしれません。

const swiper = new Swiper('.swiper-container', {
  loop: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  effect: 'flip'
});

Effect Filp のデモはコチラ

Swiper でレスポンシブなスライダーを作る方法

Swiper.js のスライダーは基本的にCSSで「.swiper-container」の横幅を100%にすればwindowのサイズに応じて伸び縮みしてくれますが、スマートフォン表示の時にPCとは違う表示にしたいというニーズもあるかと思います。

素晴らしいことにSwiperには最初からそういったオプションが用意されています。

例えば、PC版ではスライダーを3枚表示していたけどブレイクポイントを480pxとして、スマートフォンでは1枚表示にしたい場合などは以下のように記述します。

<div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <div class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

.swiper-container {
  width: 600px;
  height: 300px;
  line-height: 300px;
  text-align: center;
}

@media screen and (max-width: 480px) {
    .swiper-container {
      width: 100%;
      height: 300px;
      line-height: 300px;
      text-align: center;
    }
}

const swiper = new Swiper('.swiper-container', {
  loop: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  breakpoints: {
  	480: {
  		slidesPerView: 3,
      	spaceBetween: 20
  	}
  }
});