コーディング

【実装例あり】スライダーSwiper.jsの基本的な使い方、機能解説

2021.10.20

KIOMIRU

KIOMIRU

こんにちは、フロントエンドエンジニアの北村です。

Web制作においては、画像やコンテンツを横並びにし、スライドさせるシーンがよくあります。
そんなときに活用できる、高機能で便利なスライダーライブラリについてご紹介します。
基本的な設置方法はもちろん、ライブラリに用意されたオプションの設定方法や簡単な装飾例も解説するので、ぜひ活用してみてください。

 Swiperとは？活用シーンや公式サイトの紹介

特徴と活用シーンの紹介

Swiper.jsはスライダーが作れるJavaScriptライブラリです。スライダー実装時に活用します。
最大の特徴は「ライブラリにとらわれない」ということです。jQueryのようなJavaScriptライブラリを必要としないため、それらを使用するその他のスライダーライブラリよりも高速で読み込むことができます。
その他の強みとして挙げられるのは、公式のオプション機能やデモが充実していることやレスポンシブにも対応していることです。
だだし、公式サイトが英語のみという点は少し残念です。適宜翻訳しながら使用すれば問題ないかと思います。
「スライダーを作るなら、Swiper以外にはいらないんじゃないか？」と思うくらい高機能なライブラリです。

公式サイトの紹介

公式サイトは以下です。

公式サイト：https://swiperjs.com/
資源：https://unpkg.com/browse/swiper@7.0.2

Swiperの導入フロー

基本的な導入フローを紹介します。
大まかな流れとしては、まずライブラリを読み込み、次にHTMLでベースとなる要素を決定しCSSで装飾、最後にJSで動きの調整を行います。

Swiperの使うための準ーーライブラリを読み込む

まずは、CDNでライブラリを読み込みます。もしくは、資源をダウンロードしてローカルで設置し、読み込んでください。
CDNを利用する場合は、公式サイトから最新のCDNを読み込んでください。特にこだわりがなければ、名前に「min」がついた、より軽量な圧縮ファイルの使用をおすすめします。

2021/08/27 時点で最新のCDNはこちら

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

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

ベースとなる要素（HTML）

以下がベースとなるHTMLのコードです。最低限の記述です。

<!-- スライダーのコンテナ -->
<div class="swiper">
  <!-- 必要に応じたwrapper -->
  <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>

ベースとなる要素（JS）

以下がベースとなるJSのコードです。最低限の記述です。初期化とも呼ばれます。

const swiper = new Swiper(".swiper", {});

サイズ、背景色を調整するCSS（お好みで）

デフォルトでは背景色も高さや横幅もなく、動きがわかりにくいため、CSSで調整します。今回は、適当な背景色と高さ、横幅を以下のようなCSSで調整しています。

.swiper--wrapper {
  /* wrapperのサイズを調整 */
  width: 100%;
  height: 300px;
}

.swiper-slide {
  /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
  color: #ffffff;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 300px;
}

.swiper-slide:nth-child(3n + 1) {
  /*1、4、7、3n+1枚目の背景色 */
  background-color: #de4439;
}

.swiper-slide:nth-child(3n + 2) {
  /*2、5、8、3n+2枚目の背景色 */
  background-color: #fcd500;
}

.swiper-slide:nth-child(3n + 3) {
  /*3、6、9、3n+3枚目の背景色 */
  background-color: #53c638;
}

以上が最低限のコードとなります。

ここまでの最もシンプルな形で、一度動くかどうか確かめることをおすすめします。要素を一つ加えるごとに確認を行えば、エラーの原因を把握しやすいです。どこがエラーかわからないドツボにハマってしまって時間をロスすることを避けられるかもしれません。僕もJSを読み込む順番の間違いに気づかず、1時間以上ロスしてしまった経験があります。

この時点で動いていない場合には、以下のようなことが理由として考えられます。もう一度見直してみましょう。

  • JS、cssのどちらかを正しく読み込めていない
  • JSを読み込む順に誤りがある（ライブラリが先、初期化のコードは後など）
  • ベースとなる要素のHTML、JSの記述が抜けている

ページネーションやボタンの設置

さらに、スライダーとよくセットで使用する機能もSwiperなら簡単に設置できます。スライダーを前後にスライドさせるボタンや、スライダーの現在地を示すページネーションを設置してみましょう。

これらは最初からオプション機能として備わっているため、HTMLとJSにそれぞれ数行足すだけで簡単に実装できます。

<!-- スライダーのコンテナ -->
<div class="swiper">
<!-- 必要に応じたwrapper -->
<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-pagination"></div>
<!-- 必要に応じてナビボタン -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>

const swiper = new Swiper(".swiper", {
  // ページネーションが必要なら追加
  pagination: {
    el: ".swiper-pagination"
  },
  // ナビボタンが必要なら追加
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  }
});

デフォルトデザインのボタンとページネーションを表示させることができました。デフォルトでは青い矢印のボタンと青丸のページネーションが実装されています。

オプション機能でボタンのタイプを変更することもできます。
次の章でいくつかのオプションを紹介します。

Swiperのオプション紹介

ここからはSwiperの便利なオプションを3つご紹介します。また、ページネーションのパターン例も2つ紹介しているので、参考にしてみてください。

Swiperのオプション紹介1　縦方向のスライド

JSに以下の一行を加えることで、スライドの方向を縦に変更できます。ページネーションも縦になりました。ページネーションと重なるために、ボタンの位置と角度をCSSで変更しています。

const swiper = new Swiper(".swiper", {
  direction: "vertical" /* この行を追加 */,
  // ページネーションが必要なら追加
  pagination: {
    el: ".swiper-pagination"
  },
  // ナビボタンが必要なら追加
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  }
});

Swiperのオプション紹介2　表示枚数変更

JSに以下の一行を加えることで、スライドの表示枚数を変更できます。

const swiper = new Swiper(".swiper", {
  slidesPerView: 3　/* この行を追加 */,
  // ページネーションが必要なら追加
  pagination: {
    el: ".swiper-pagination"
  },

  // ナビボタンが必要なら追加
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  }
});

Swiperのオプション紹介3　レスポンシブの調整

表示枚数変更を例に、レスポンシブ調整を行いましょう。
レスポンシブ調整は、「ブレイクポイント」を設定しブレイクポイントごとにオプションを設定することで調整できます。
今回は、PCの場合（768px以上の場合）はスライドの表示枚数を3枚、スマホでは1枚として調整を行いました。

const swiper = new Swiper(".swiper", {
  slidesPerView: 1,
  breakpoints: {
    // 768px以上の場合
    768: {
      slidesPerView: 3
    }
  },
  // ページネーションが必要なら追加
  pagination: {
    el: ".swiper-pagination"
  },

  // ナビボタンが必要なら追加
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  }
});

ページネーションのタイプ紹介1　プログレスバー

ページネーションのオプションを活用し、スライドの進度を示すバーに変更してみましょう。
JSに以下の一行を加えるだけでページネーションの変更が完了します。

const swiper = new Swiper(".swiper", {
  // ページネーションが必要なら追加
  pagination: {
    el: ".swiper-pagination",
    type: "progressbar" /* この行を追加 */
  },
  // ナビボタンが必要なら追加
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  }
});

ページネーションのタイプ紹介2　分数

ページネーションのオプションを活用し、「何枚目/何枚中」という分数のタイプに変更してみましょう。
JSに以下の一行を加えるだけでページネーションの変更が完了します。

const swiper = new Swiper(".swiper", {
  // ページネーションが必要なら追加
  pagination: {
    el: ".swiper-pagination",
    type: "fraction" /* この行を追加 */
  },
  // ナビボタンが必要なら追加
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  }
});

装飾デザインを紹介

最後に、さまざまな装飾デザインの例をご紹介します。ページネーションやボタンの調整、さらにギャラリータイプやカバーフロータイプの調整方法もご紹介するので参考にしてください。

ページネーションのデザイン調整例

ページネーションのデザイン調整例を紹介します。デフォルトのページネーションはシンプルな小さめの青い丸で少し味気がないですね。さっそく調整してみましょう。
色を黒色に、ページネーションの大きさとそれぞれの余白を少し大きくしてみました。

.swiper--wrapper {
  /* wrapperのサイズを調整 */
  width: 100%;
  height: 300px;
}

.swiper-slide {
  /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
  color: #ffffff;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 300px;
}

.swiper-slide:nth-child(3n + 1) {
  background-color: #de4439;
}

.swiper-slide:nth-child(3n + 2) {
  background-color: #fcd500;
}

.swiper-slide:nth-child(3n + 3) {
  background-color: #53c638;
}

.swiper-pagination-bullet {
  width: 12px !important;
  height: 12px !important;
  margin: 0 0 0 10px !important;
  background: #333 !important;
}

.swiper-pagination-bullet:first-child {
  margin: 0 !important;
}

さらに、上記で調整したものを枠の外に出す調整を行います。

前述の「ページネーションやボタンの設置」にて追加したHTML要素を<div class=”swiper”></div>の外に出します。
swiper要素の外に出す理由は、親要素に{overflow : hidden}が設定されているためです。したがって、CSSで位置を調整し、ページネーションやボタンを外に出すと非表示になるので注意が必要です。

<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <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 ４</div>
  </div>
  <!-- 必要に応じてナビボタン -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>
<!-- 必要に応じてページネーション -->
<div class="swiper-pagination"></div>

ボタンのデザイン調整例

ボタンのデザイン調整例を紹介します。シンプルな青い矢印が読み込まれています。さっそく調整して、黒い矢印に変更してみましょう。

ポイントは2点あります。

  • 擬似要素で表示されているデフォルトの矢印を非表示にする
  • .swiper-button-prevと.swiper-button-nexのそれぞれの背景画像として矢印を表示する

まず、擬似要素で表示されているデフォルトの矢印を非表示にする方法を解説します。以下のコードでデフォルトのものを非表示にするか、swiperのcssから削除もしくはコメントアウトでも非表示にできます。

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

変更したボタンをスライドの外に出してみます。

調整前はスライド自体が横幅いっぱいなので、ボタンを入れるスペースがありません。そこで、<div class=”.swiper”></div>に左右のpaddingでスペースを作ります。
ボタンはそれぞれデフォルトの状態で.swiperに対して相対位置が決まっているので、今回の場合はボタンの位置を調整しなくても、作った余白スペースにボタンがうまく収まるかと思います。

Swiperデザイン調整例 1 ギャラリー

デザイン調整例の一つとして、ギャラリー型の調整方法をご紹介します。

メインとサムネイル、２つのスワイパーを設置し、サムネイルのスワイパーのサイズや場所をCSSで調整します。さらに、メインのスワイパーのJSに”thumbs: {swiper: swiper},”を追加することで、メインとサムネイルのスワイパーが連動するような仕様に調整できました。

CSSの調整次第では、サムネイルをメインのスワイパー内に設置することも可能です。

あとは、サムネイル部分を調整します。
スライドの表示枚数とスライダーの間隔をJSで指定し、透過やサイズについてCSSで指定すれば完了です。サムネイルのSwiperはメインのSwiperの中に入れることも可能です。
最小限の工夫で、デザインの幅を広げられたのではないでしょうか。

<!-- Slider main container -->
<div class="swiper mySwiper2">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <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 ４</div>
  </div>
  <!-- 必要に応じてナビボタン -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>
<div class="swiper mySwiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <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 ４</div>
  </div>
</div>
.swiper--wrapper {
  /* wrapperのサイズを調整 */
  width: 100%;
  height: 300px;
}

.swiper-slide {
  /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
  color: #ffffff;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 400px;
}

.swiper-slide:nth-child(3n + 1) {
  background-color: #de4439;
}

.swiper-slide:nth-child(3n + 2) {
  background-color: #fcd500;
}

.swiper-slide:nth-child(3n + 3) {
  background-color: #53c638;
}

.mySwiper2 {
  height: 400px;
  width: 100%;
}

.mySwiper {
  height: 100px;
  box-sizing: border-box;
  padding: 10px 0;
}

.mySwiper .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
  line-height: 80px;
}

.mySwiper .swiper-slide-thumb-active {
  opacity: 1;
}


const swiper = new Swiper(".mySwiper", {
  spaceBetween: 10,
  slidesPerView: 4
});

const swiper2 = new Swiper(".mySwiper2", {
  thumbs: {
    swiper: swiper
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  }
});

Swiperデザイン調整例 2

カバーフローは写真を視覚的にめくるような表示形式です。

「effect: “coverflow”,」を指定し、「coverflowEffect: {}」の中身でカバーフローのオプションを設定します。
各オプションはそれぞれ以下のことを意味しています。

  • rorate : 次のスライドになるまでに各スライドが回転する角度
  • depth : オフセットの深さ
  • modifier : 角度
  • slideShadows : スライドの影

特別にこだわりがない場合は、デフォルトで問題ありません。

<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <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 ４</div>
  </div>
  <!-- 必要に応じてページネーション -->
  <div class="swiper-pagination"></div>
  <!-- 必要に応じてナビボタン -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>
.swiper--wrapper {
  /* wrapperのサイズを調整 */
  width: 100%;
  height: 300px;
}

.swiper-slide {
  /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
  color: #ffffff;
  width: 300px;
  height: 100%;
  text-align: center;
  line-height: 300px;
}

.swiper-slide:nth-child(3n + 1) {
  background-color: #de4439;
}

.swiper-slide:nth-child(3n + 2) {
  background-color: #fcd500;
}

.swiper-slide:nth-child(3n + 3) {
  background-color: #53c638;
}

const swiper = new Swiper(".swiper", {
  // ページネーションが必要なら追加
  pagination: {
    el: ".swiper-pagination"
  },
  effect: "coverflow",
  grabCursor: true,
  centeredSlides: true,
  slidesPerView: "2",

  coverflowEffect: {
    rotate: 50,
    stretch: 0,
    depth: 100,
    modifier: 1,
    slideShadows: true
  },

  // ナビボタンが必要なら追加
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  }
});

まとめ

もっとも有名なスライダーライブラリであるSwiperの基本的な使用方法やカスタマイズの方法、簡単な装飾について紹介しました。
少ない工数で多くの機能を持つスライダーを実装できる便利なツールです。Swiperには充実したデモやAPIがあるので、もっと深堀りしたい方は公式サイトから調べられることをおすすめします。
ページネーションを外に出したり、ボタンを装飾したりするのは、わかっていれば簡単に終わるのですが、僕も迷った経験がありました。この記事が同じようなことで困っている方の助けになれば幸いです。
読んでいただきありがとうございました。

この記事の執筆者

KIOMIRU

KIOMIRU

    この記事を気に入りましたら、ぜひ「いいね」「シェア」をお願いします。

    Twitter Facebook Pocket はてブ

    キオミル株式会社では個別交流会を実施しています。

    キオミルでは将来一緒に働いてくれる仲間やパートナー、同業種の方々と交流したいと考えています。転職先や職職先としてキオミルに興味がある方、同業者やパートナーとしてキオミルに興味のある方。まずは飲み物でも飲みながらゆるやかに交流しませんか？

    Web制作に関するお悩みがある方はお気軽にご相談ください。

    ご相談・お問い合わせはこちら

    ライター

    KIOMIRU
    KIOMIRU
    アバター
    椿坂 泰志
    林 暁東
    林 暁東
    難波 葵
    難波 葵
    田中 佳奈
    田中 佳奈
    西村 裕香
    西村 裕香
    橋本 祐典
    橋本 祐典
    小山田 笑渚
    小山田 笑渚
    萩尾 奈未
    萩尾 奈未

    このブログについて

    キオミルブログはキオミル株式会社のスタッフが日々の学びや社内のカルチャーなどを発信するブログです。

    キオミル株式会社はビジネス課題を解決できるWeb制作会社です。特に中小中堅企業を中心とした、BtoB企業の新規見込客の獲得や採用強化、業務効率化の支援を得意としています。Web制作やマーケティングに関するお悩みがある方はお気軽にご相談ください。

    運営会社のWebサイトはこちら