HTML・CSS JavaScript

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

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

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

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

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

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



 

 

Swiper.js とは何か

Swiper.js とは何か

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

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

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

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

Examples はコチラ

 

Swiper の使い方

Swiper の使い方

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

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

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

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

 

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

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を利用する場合

一番簡単な使い方としては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(デモ)

基本的なスライダーの実装 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 の便利なオプション機能

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 でレスポンシブなスライダーを作る方法

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

 

Swiper.js が動かない場合の対処手段

Swiper.js が動かない場合の対処手段

もしもSwiperが動かない場合や表示されない場合は、まずはブラウザのデベロッパツールから「console」を開いてログを確認してみましょう。

その上でリンク切れが起きている場合や、ライブラリのJavaScriptを実行する順番が間違っていれば修正するようにしましょう。

大体の場合はCSSが上手くクラスに効いていない場合やソースを読み込む際のリンクを間違っているケースが考えられます。

どうしてもエラー内容がわからない場合や何度対処しても上手くいかない場合はteratailというサービスを使って他のエンジニアの人に相談することも考えてみましょう。

 

まとめ

Swiper.js 入門者向けに基本的な使い方や便利なオプション機能について解説してきましたがいかがでしたでしょうか？

できることが多いので初心者には扱いづらいと思う人もいるかもしれませんが、オプション機能が豊富ということは、もしもSwiper を導入しているサイトでスライダーの仕様変更があった場合でも設定を変えるだけで対応できてしまうというケースもあるので、扱い慣れておくと必ず良いことがあります。

小規模サイトでも大規模サイトでも手軽に実装できて改造がしやすいので、慣れてきた上級者の人はオリジナルのカスタマイズに挑戦してみるのもいいかもしれません。

 

【31日間無料】U-NEXTで話題の映画、アニメ、漫画を見まくろう！

無料トライアル実施中！＜U-NEXT＞

  • この記事を書いた人

ゲンキ

物作りが大好きなWEBエンジニア。
高卒でアルバイトを転々とする生活の中、一念発起し独学でプログラミングを習得。
底辺脱出後はWEB制作(フロントエンド / バックエンドの実装)の仕事をして、休みの日は講師業やウェブサービスの運営とブログアフィリエイトで稼ぐ生活をしています。
WEBに関するお困りごとがありましたら、お気軽にお問い合わせください。

-HTML・CSS, JavaScript

Copyright© WordPressサイトで稼ぐ技術 , 2021 All Rights Reserved Powered by AFFINGER5.