高機能なスライダーを設置できる”Swiper”(v7)の使い方

JavaScript/jQuery

今回は、スライダーを実装できるライブラリの中でもとても高機能で多くのサイトで使われている”Swiper”(バージョン7系)について紹介していきたいと思います。
なお、旧バージョンのv6系から現行バージョンのv7系Swiperに移行される方は、使い方など変わっている部分もありますので下記の移行ガイドのページをチェックしてみてください。
v7系Swiperへの移行ガイド 

・Swiperのページ
https://swiperjs.com/

Swiperのページのスクリーンショット

それでは、ここからSwiperについて具体的に紹介していきます。
前半でSwiperを利用するまでの手順について紹介し、後半でSwiperで利用できるオプションや各種設定について紹介したいと思います。
最後には、Swiperのカスタマイズ例をいくつか紹介しますので、是非最後までご覧ください。

Swiperを利用する手順

Swiperを利用する手順を大まかに分けると以下のようになります。

  1. Swiperをページに読み込ませる
  2. HTMLにスライダー部分の記述を設置
  3. Swiperのイニシャライズ

以下でそれぞれについて紹介していきます。

Swiperをページに読み込ませる

Swiperを利用するには、CSSとJavaScriptのファイルをページに読み込ませる必要があります。
これらのファイルをページに読み込ませる方法には、CDNを利用する方法とダウンロードする方法とがありますのでそれぞれについて紹介していきます。

(1)CDNを利用する場合

CDNを利用してSwiperをページに読み込ませる際は、下記のような記述をページに設置します。

・CSSを読み込ませる記述(headタグ内に記述します)

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

・JavaScriptを読み込ませる記述(bodyタグの閉じタグ前に記述します)

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

(2)ダウンロードしてサイトに設置する場合

ダウンロードしてSwiperをページに読み込ませる際は、まず下記のページでSwiperのCSSとJavaScriptのファイルをダウンロードします。

 https://unpkg.com/swiper@7/
SwiperのファイルをダウンロードできるUNPKGのページ

上記のページにアクセスして、赤い下線を引いた二つのファイル
・swiper-bundle.min.css
・swiper-bundle.min.js
をダウンロードします。

ダウンロードの方法について、CSSファイルの場合を例に紹介しておきます。
ダウンロードしたいファイル名(ここでは、「swiper-bundle.min.css」)をクリックすると、下図のページが開きます。

UNPKGのswiper-bundle.min.cssのページ

上の図の赤い下線を引いた「View Raw」を右クリックして「リンク先を別名で保存」を選択するか、「View Raw」をクリックしてコードが書かれたページに移動してから右クリックして「別名で保存」を選択することで、CSSのファイルをダウンロードすることができます。

「View Raw」ボタンを右クリックしてCSSファイルをダウンロード
「View Raw」を右クリックしてダウンロード
CSSコードのページで右クリックしてファイルをダウンロード
「View Raw」でコードのページに移動して右クリックでダウンロード

同様にしてJavaScriptのファイルもダウンロードし、二つのファイルをサイトに設置してください。
その後、下記の例のような記述をサイトに設置してそれぞれのファイルをページに読み込ませます。

・CSSを読み込ませる記述(headタグ内に記述します)

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

・JavaScriptを読み込ませる記述(bodyタグの閉じタグ前に記述します)

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

※いずれも「path-to」となっている部分には、それぞれのファイルへのパスを記述してください。

HTMLにスライダー部分の記述を設置

HTMLに記述するスライダー部分の記述例は下記の通りです。
“Slide 1″から”Slide 3”の部分に画像などスライドとして表示させたいものを入れます。(数は必要に応じて変えてください。)
ページネーション、ナビゲーション、スクロールバーはそれぞれ必要に応じて記述してください。

<!-- スライダー全体を囲むdiv -->
<div class="swiper">
  <!-- スライドだけを囲むdiv -->
  <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 class="swiper-scrollbar"></div>
</div>

Swiperのイニシャライズ

次にSwiperのイニシャライズの記述を行います。
この記述は、先程紹介したJavaScriptを読み込ませる記述 <script src="・・・/swiper-bundle.min.js"></script> のうしろ(bodyタグの閉じタグ直前)に設置します。

<script>
  const swiper = new Swiper('.swiper', {
    // ページネーションを設置した場合は下記を記述
    pagination: {
      el: '.swiper-pagination',
    },

    // ナビゲーションを設置した場合は下記を記述
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

    // スクロールバーを設置した場合は下記を記述
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  });
</script>

ここまでの手順で、以下のようなスライダーが設置できます。

See the Pen
Untitled
by saku (@web-saku)
on CodePen.

ここで、Swiperで設置したスライダーの各部の名称について紹介しておきますので、各要素が必要がどうか判断する際に参考にしてみてください。

Swiperで設置したスライダーの各部の名称

Swiperで利用できるオプションや各種設定

Swiperではとてもたくさんのオプションや各種設定が用意されていますので、ここではよく使われそうな下記のものに絞って紹介したいと思います。

  1. オートプレイ
  2. ページネーション
  3. ナビゲーション
  4. ループ
  5. スクロールバー
  6. スライドの方向
  7. スライドの表示枚数
  8. スライド間のスペース
  9. ブレイクポイント
  10. Lazy loading(遅延読み込み)
  11. エフェクト

以下でそれぞれについて紹介していきます。

オートプレイ

Swiperを利用して設置したスライダーを自動でスライドさせるためには、オートプレイの設定をしておく必要があります。
また、合わせて delay: の後に希望するスライドの間隔(単位はミリ秒)を設定してください。
下の記述例のように delay: 3000, と書いた場合、3000ミリ秒(=3秒)ごとに自動でスライドするようになります。

・オートプレイを利用する場合のイニシャライズ部分の記述例

<script>
  const swiper = new Swiper('.swiper', {
    autoplay: {
      delay: 3000,
    },
  });
</script>

ページネーション

Swiperでのページネーションとは、スライドの現在位置がわかるように表示させるガイドのことです。
ページネーションはHTMLに要素を設置して、Swiperのイニシャライズ時に記述をすることで設置することができます。
HTMLには、 <div class="swiper">…</div> の中に以下のようにページネーションの要素を設置します。

<!-- ページネーションが必要な場合は下記を記述 -->
  <div class="swiper-pagination"></div>

Swiperを利用して設置したスライダーにページネーションを設置する場合、以下のタイプから種類を選ぶことができます。
それぞれの表示と記述方法を紹介していきます。

bullets

“bullets”は、スライドの位置を●で表示させるタイプのページネーションです。
またpaginationのタイプに、この”bullets”を選択した場合にはオプションの”clickable”を利用することができます。 clickable: true, の記述を追加することで、●をクリックしてスライドを動かすことができるようになります。
ページネーションの表示と記述例は下のようになります。

See the Pen
Untitled
by saku (@web-saku)
on CodePen.

・ページネーション”bullets”を利用する場合のイニシャライズ部分の記述例

<script>
  const swiper = new Swiper('.swiper', {
    pagination: {
      el: '.swiper-pagination',
          type: 'bullets',
          clickable: true,
    },
  });
</script>

bulletsタイプのページネーションのカスタマイズ例をこのページの後半で紹介していますので、興味のある方は見てみてください。

fraction

“fraction”は、スライドの位置を何枚中の何枚目というように数字で表示させるタイプのページネーションです。
ページネーションの表示と記述例は下のようになります。

See the Pen
Untitled
by saku (@web-saku)
on CodePen.

・ページネーション”fraction”を利用する場合のイニシャライズ部分の記述例

<script>
  const swiper = new Swiper('.swiper', {
    pagination: {
      el: '.swiper-pagination',
          type: 'fraction',
    },
  });
</script>

progressbar

“progressbar”は、スライドの位置をプログレスバーで表示させるタイプのページネーションです。”
“progressbar”のページネーションは、”bullets”や”fraction”と異なり、表示位置がスライドの上側になります。
ページネーションの表示と記述例は下のようになります。

See the Pen
Untitled
by saku (@web-saku)
on CodePen.

・ページネーション”progressbar”を利用する場合のイニシャライズ部分の記述例

<script>
  const swiper = new Swiper('.swiper', {
    pagination: {
      el: '.swiper-pagination',
          type: 'progressbar',
    },
  });
</script>

custom

ページネーションは、ここまで紹介してきた3つのタイプの他に”custom”を選択して、自身でカスタマイズすることもできます。
できることはとてもたくさんありますが長くなってしまうので、ここではSwiperのページでも紹介されているカスタマイズの例だけを載せておきます。
ページネーションの表示と記述例は下のようになります。

See the Pen
Untitled
by saku (@web-saku)
on CodePen.

・”custom”を利用して上のようなページネーションを設置する場合のイニシャライズ部分の記述例

<script>
  const swiper = new Swiper('.swiper', {
    pagination: {
      el: '.swiper-pagination',
          clickable: true,
          renderBullet: function (index, className) {
            return '<span class="' + className + '">' + (index + 1) + "</span>";
          },
    },
  });
</script>

・”custom”を利用して上のようなページネーションを設置する場合のCSSの記述例

.swiper-pagination-bullet {
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  color: #000;
  opacity: 1;
  background: rgba(0, 0, 0, 0.2);
}

.swiper-pagination-bullet-active {
  color: #fff;
  background: #007aff;
}

Swiperでのナビゲーションとは、スライドの左右の端に設置されている矢印のことで、これをクリックすることでスライドを動かすことができます。
ナビゲーションはHTMLに要素を設置して、Swiperのイニシャライズ時に記述をすることで設置することができます。
HTMLには、 <div class="swiper">…</div> の中に以下のようにナビゲーションの要素を設置します。

<!-- ナビゲーションが必要な場合は下記を記述 -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

Swiperを利用して設置したスライダーにナビゲーションを設置したい場合、イニシャライズ時に下記の記述例のように記述します。
ナビゲーションの表示と記述例は下のようになります。

See the Pen
Untitled
by saku (@web-saku)
on CodePen.

・ナビゲーションを利用する場合のイニシャライズ部分の記述例

<script>
  const swiper = new Swiper('.swiper', {
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
 });
</script>

ナビゲーションのカスタマイズ例をこのページの後半で紹介していますので、興味のある方は見てみてください。

ループ

Swiperを利用して設置したスライダーに、前の項目で紹介したナビゲーションを設置しただけだとスライドの一番最後まで移動した状態で右矢印をクリックしてもスライドがそれ以上は移動しなくなります。
loop: true, の記述を追加することで、最後のスライドで右矢印をクリックしたら一番最初のスライドに戻るようにしたり、最初のスライドで左矢印をクリックして一番最後のスライドに移動させることができるようになります。
スライダーの動作と記述例は下のようになります。

See the Pen
Untitled
by saku (@web-saku)
on CodePen.

・ループを有効にする場合のイニシャライズ部分の記述例

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

スクロールバー

Swiperでのスクロールバーとは、スライダーの現在位置を示すためにスライドの下側に表示されるバーのことです。
スクロールバーはHTMLに要素を設置して、Swiperのイニシャライズ時に記述をすることで設置することができます。
HTMLには、 <div class="swiper">…</div> の中に以下のようにスクロールバーの要素を設置します。

<!-- スクロールバーが必要な場合は下記を記述 -->
  <div class="swiper-scrollbar"></div>

また、イニシャライズ時に hide: true, と指定することでスライダーの動作時以外は表示されないようにしたり、 draggable: true, と指定することで、スクロールバーをドラッグしてスライダーを操作することができるようになります。
スクロールバーを設置した場合のスライダーの動作と記述例は下のようになります。

See the Pen
Untitled
by saku (@web-saku)
on CodePen.

・ドラッグして操作できるスクロールバーを設置する場合のイニシャライズ部分の記述例

<script>
  const swiper = new Swiper('.swiper', {
   autoplay: {
      delay: 3000,
    },
   loop: 'true',
        // スクロールバーを設置した場合は下記を記述
    scrollbar: {
      el: '.swiper-scrollbar',
     draggable: true,      // スクロールバーをドラッグできるようにする
    },
 });
</script>

スライドの方向

Swiperを利用して設置したスライダーはデフォルト状態では水平(横)方向にスライドしますが、 direction: 'vertical', と設定することでスライドの方向を垂直(縦)方向に変更することもできます。
なお、この場合CSSで .swiper 要素に”height”を指定しておく必要がありますので注意してください。
垂直方向にスライドするスライダーに設定する場合のスライダーの動作と記述例は下のようになります。

See the Pen
Untitled
by saku (@web-saku)
on CodePen.

・スライドの方向を垂直(縦)方向にする場合のイニシャライズ部分の記述例

<script>
  const swiper = new Swiper('.swiper', {
    direction: 'vertical',      // スライドの方向を垂直方向にする
    pagination: {
      el: '.swiper-pagination',
     type: 'bullets',
     clickable: true,
    },
   autoplay: {
      delay: 3000,
    },
    loop: 'true',
 });
</script>

スライドの表示枚数

Swiperを利用して設置したスライダーはデフォルト状態では一度に1枚のスライドだけを表示させますが、 slidesPerView: の設定をすることで、1度に何枚のスライドを表示させるかを変更することもできます。
1度に3枚のスライドを表示させる場合のスライダーの動作と記述例は下のようになります。

See the Pen
Untitled
by saku (@web-saku)
on CodePen.

・1度に3枚のスライドを表示させる場合のイニシャライズ部分の記述例

<script>
  const swiper = new Swiper('.swiper', {
   slidesPerView: 3,      // 一度に表示させるスライドの数を3に設定
    pagination: {
      el: '.swiper-pagination',
     type: 'bullets',
     clickable: true,
    },
   autoplay: {
      delay: 3000,
    },
    loop: 'true',
  });
</script>

スライド間のスペース

前の項目で紹介した複数枚のスライドを表示させる時などにスライド間にスペースを作りたい場合、 spaceBetween: の記述を追加することでスライド間のスペースをpxで指定することができます。
スライダーの表示と記述例は以下のようになります。

See the Pen
Untitled
by saku (@web-saku)
on CodePen.

・スライド間のスペースを10pxに設定する場合のイニシャライズ部分の記述例

<script>
  const swiper = new Swiper('.swiper', {
   slidesPerView: 3,     // 一度に表示させるスライドの数を3に設定
   spaceBetween: 10,     // スライド間の間隔を10pxに設定
    pagination: {
      el: '.swiper-pagination',
     type: 'bullets',
     clickable: true,
    },
   autoplay: {
      delay: 3000,
    },
    loop: 'true',
  });
</script>

ブレイクポイント

Swiperは、任意のブレイクポイントを指定してレスポンシブなWebデザインにも対応させることができます。
例えば、スマートフォンなど狭い画面で表示させた場合にはスライダーにスライドを一枚だけ表示させ、幅の広いパソコンのディスプレイなどで表示させた場合には同時に3枚のスライドを表示させるなどといった設定にすることでスライダーのレスポンシブな表示を実現することができます。

設定の方法としては、Swiperをイニシャライズする際に任意のブレイクポイントを指定してそれぞれの画面の幅ごとに表示するスライドの枚数などを指定することができます。
具体的な記述の方法としては、デフォルトの設定のところにスマートフォンなど画面幅が狭い場合の設定(スライドの数など)を記述したあと、任意のブレイクポイントを指定して、そのブレイクポイントよりも画面の幅が広くなった場合の設定をその中に記述していきます。
なお、ブレイクポイントは何個でも設定できるのでそれぞれのサイトに応じて柔軟に対応することができます。

具体例として、下記のようなスライダーを設置したい場合の記述例と実際のスライダーの表示を紹介していきます。
・スマートフォンなど幅の狭い画面(画面幅が768px未満)→1枚のスライドを表示
・タブレットなど中間ぐらいの幅の広さ(画面幅が768px以上、1024px未満)→2枚のスライドを表示
・パソコンなど幅の広い画面(画面幅が1024px以上)→3枚のスライドを表示

ブレイクポイントを指定する場合のイニシャライズ部分の記述例

<script>
    const swiper = new Swiper('.swiper', {
    pagination: {
      el: '.swiper-pagination',
     type: 'bullets',
     clickable: true,
    },
   autoplay: {
      delay: 3000,
    },
    loop: 'true',

  // デフォルト(画面の幅が最も狭い時)のスライドの数などを設定
  slidesPerView: 1,        // 表示させるスライドの数を1に設定

  // ここからレスポンシブ対応のためのブレイクポイントとスライダーの設定を記述
  breakpoints: {       
    768: {      // 画面幅が768px以上の場合の設定を記述
      slidesPerView: 2,     // 表示させるスライドの数を2に設定
      spaceBetween: 20      // スライド間の間隔を20pxに設定
    },

    1024: {   // 画面幅が1024px以上の場合の設定を記述
      slidesPerView: 3,     // 表示させるスライドの数を3に設定
      spaceBetween: 30      // スライド間の間隔を30pxに設定
    },
  }
});
</script>

ブレイクポイントを指定した場合の各画面幅でのスライダーの表示

ブレイクポイントを設定したSwiperでの画面幅が360pxの時の表示
画面幅が360pxのときは1個のスライドを表示
ブレイクポイントを設定したSwiperでの画面幅が768pxの時の表示
画面幅が768pxのときは2個のスライドを表示
ブレイクポイントを設定したSwiperでの画面幅が1024pxの時の表示
画面幅が1024pxのときは3個のスライドを表示

上記のようなブレイクポイントの設定を行うことで画像のように
画面の幅が768px未満の場合にはスライドを1個表示させ、
画面の幅が768px以上1024px未満の場合には2個のスライドを表示させ、
画面の幅が1024px以上の場合には3個のスライドを表示させることができます。

Lazy loading(遅延読み込み)

Swiperでは、画像などスライドの要素を遅延読み込みさせることもできます。
遅延読み込みを利用するには、HTMLの記述をここまでで紹介したものとは変更する必要がありますので注意してください。

ここでは、スライドに画像(img要素)を使用する場合を例にして、HTMLの記述例とイニシャライズの記述例を紹介しておきます。

Lazy loading(遅延読み込み)を利用する際のHTMLの記述例

Lazy loading(遅延読み込み)を利用する場合のHTMLの記述は、はじめに紹介したHTMLの記述から以下の2点を変更する必要があります。
① 画像(img要素)をスライドに使用する場合、src属性ではなく、data-src属性に画像のURLを指定する
② 各画像(img要素)のクラス名に class="swiper-lazy" を指定する

また、読み込み待ちの間にプリローダー(スピナーのアニメーション)を表示させたい場合は、各 .swiper-slide 要素に <div class="swiper-lazy-preloader"></div> を設置します。

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img data-src="img/img1.jpg" class="swiper-lazy" alt="">
            <div class="swiper-lazy-preloader"></div>
        </div>
        <div class="swiper-slide">
            <img data-src="img/img2.jpg" class="swiper-lazy" alt="">
            <div class="swiper-lazy-preloader"></div>
        </div>
        <div class="swiper-slide">
            <img data-src="img/img3.jpg" class="swiper-lazy" alt="">
            <div class="swiper-lazy-preloader"></div>
        </div>
    </div>

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

Lazy loading(遅延読み込み)を利用する際のイニシャライズの記述例

Lazy loading(遅延読み込み)を利用する場合のイニシャライズの記述例は以下のようになります。
なお、スライダーに同時に2枚以上のスライドを表示させる場合にはイニシャライズ時に watchSlidesProgress: true, も併せて設定しておく必要があります。

<script>
    const swiper = new Swiper('.swiper', {
        pagination: {
            el: '.swiper-pagination',
            type: 'bullets',
            clickable: true,
        },
        autoplay: {
            delay: 3000,
        },
        loop: 'true',
        preloadImages: false,        // デフォルトの事前読み込みを無効にする
        lazy: true,           // 遅延読み込みを有効にする
        });
</script>

エフェクト

Swiperでは、スライドが移動する際のエフェクトがいくつか用意されており、エフェクトの名称を指定することで、簡単にスライダーの動作に変化を加えることができます。
ここでは、それぞれのエフェクトを指定する際の記述方法と実際のスライダーの動作を紹介していきます。

fade

・イニシャライズの記述の中で effect: 'fade', と指定

See the Pen
Untitled
by saku (@web-saku)
on CodePen.

cube

・イニシャライズの記述の中で effect: 'cube', と指定
“cube”では、デフォルトでshadowが設置されていますので、不要な場合には cubeEffect: { shadow: false, }, と指定してください。

See the Pen
Untitled
by saku (@web-saku)
on CodePen.

coverflow

・イニシャライズの記述の中で effect: 'coverflow', と指定し、 slidesPerView: に表示させたいスライドの数を指定
“coverflow”では、デフォルトでslideShadowsが設置されていますので、不要な場合には coverflowEffect: { slideShadows: false, }, と指定してください。

See the Pen
Untitled
by saku (@web-saku)
on CodePen.

flip

・イニシャライズの記述の中で effect: 'flip', と指定

See the Pen
Untitled
by saku (@web-saku)
on CodePen.

cards

・イニシャライズの記述の中で effect: 'cards', と指定

See the Pen
Untitled
by saku (@web-saku)
on CodePen.

creative

effectには、ここまで紹介してきたものの他にも effect: "creative", と指定した上で自身でエフェクトを作成できる”creative”が用意されています。
Swiperのページで紹介されているエフェクト”creative”の例の中から1つだけ動作と記述例を紹介しておきます。

See the Pen
Untitled
by saku (@web-saku)
on CodePen.

・effectにcreativeを指定してエフェクトを自作する場合のイニシャライズ部分の記述例

<script>
  const swiper = new Swiper('.swiper', {
   autoplay: {
      delay: 3000,
    },
    pagination: {
      el: '.swiper-pagination',
     type: 'bullets',
     clickable: true,
    },
    grabCursor: true,
        effect: "creative",      // effectにcreativeを指定
        creativeEffect: {          // ここからcreativeの動作内容を記述
          prev: {
            origin: "left center",
            translate: ["-5%", 0, -200],
            rotate: [0, 100, 0],
          },
          next: {
            origin: "right center",
            translate: ["5%", 0, -200],
            rotate: [0, -100, 0],
          },
        },
  });
</script>

Swiperのカスタマイズ例

ここからは、比較的簡単にできるSwiperのカスタマイズ例を紹介していきたいと思います。

ページネーション”bullets”のカスタマイズ

ここでは、水平方向にスライドするスライダーに設置した”bullets”タイプのページネーションをカスタマイズしてみたいと思います。
デフォルトでSwiperのページネーション”bullets”に関連する主なCSSは下記のようになっています。

.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
}

.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}

.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: 10px;
  left: 0;
  width: 100%;
}

.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display: inline-block;
  border-radius: 50%;
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
}

.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}

これらのCSSを上書きしてページネーションを下のようにカスタマイズしていきます。

See the Pen
Untitled
by saku (@web-saku)
on CodePen.

このときのCSSの記述例は以下のようになります。

.swiper {
  padding-bottom: 20px; /* スライダーの下にページネーションのスペースを作る */
}

.swiper-pagination {
  text-align: left; /* ページネーションを左寄せにする */
}

.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: 0; /* ページネーションの上下方向の位置を調整 */
}

.swiper-pagination-bullet { /* bulletsのサイズと形状を変更 */
  width: 40px;
  height: 7px;
  border-radius: 0;
}

.swiper-pagination-bullet-active {
  background: #00A35E; /* active状態のbulletsの色を変更 */
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 5px 0 0; /* bulletsのmarginを変更して左端をスライドと揃える */
}

次に、スライダーに設置したナビゲーションをカスタマイズしてみたいと思います。
デフォルトでSwiperのナビゲーションに関連する主なCSSは下記のようになっています。

:root {
    --swiper-navigation-size: 44px;
    /*
    --swiper-navigation-color: var(--swiper-theme-color);
    */
  }

.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}

.swiper-button-prev:after,
.swiper-button-next:after {
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  text-transform: none !important;
  letter-spacing: 0;
  text-transform: none;
  font-variant: initial;
  line-height: 1;
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
  left: 10px;
  right: auto;
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
  content: 'prev';
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right: 10px;
  left: auto;
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
  content: 'next';
}

これらのCSSを上書きしてナビゲーションを下のようにカスタマイズしていきます。
左右のナビゲーションボタンはFont Awesomeを利用しました。
(Font Awesomeの使い方に関してはこちらで紹介しています。)

See the Pen
Untitled
by saku (@web-saku)
on CodePen.

今回は、ナビゲーションボタンをスライドの外側に表示させるためにHTMLにも変更を加えています。左右のナビゲーションボタンを”swiper”クラスのdivの外に移動し、新たに”container”クラスのdivを作成して全体を囲んでいます。
HTMLとCSSの記述例は以下のようになります。

HTML

<div class="container">
  <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="https://web-saku.net/wp-content/uploads/2022/01/blue-flower-1.jpg" alt=""></div>
        <div class="swiper-slide"><img src="https://web-saku.net/wp-content/uploads/2022/01/sunflower-1.jpg" alt=""></div>
        <div class="swiper-slide"><img src="https://web-saku.net/wp-content/uploads/2022/01/marguerite-1.jpg" alt=""></div>
        <div class="swiper-slide"><img src="https://web-saku.net/wp-content/uploads/2022/01/daylily-1.jpg" alt=""></div>
        <div class="swiper-slide"><img src="https://web-saku.net/wp-content/uploads/2022/01/cherry-blossoms-1.jpg" alt=""></div>
      </div>
  </div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

CSS

.container { /* 新しく作った"container"クラスのdiv */
  width: 100%;
  position: relative;
}

.swiper-button-prev,
.swiper-button-next {
  color: #FF6600; /* ナビゲーションボタンの色を変更 */
}

.swiper-button-prev:after, 
.swiper-button-next:after {
  font-family: "Font Awesome 5 free"; /* ナビゲーションボタンのフォントに"Font Awesome 5 free"を利用 */
  font-size: 38px; /* ナビゲーションボタンのフォントサイズを指定 */
}

.swiper-button-prev:after {
  content: '\f191'; /* 左側のナビゲーションボタンのアイコンを指定 */
}

.swiper-button-next:after {
  content: '\f152'; /* 右側のナビゲーションボタンのアイコンを指定 */
}

.swiper-button-prev {
  left: calc(20% - 38px); /* 左側のナビゲーションボタンの左右方向の位置を指定 */
}

.swiper-button-next {
  right: calc(20% - 38px); /* 右側のナビゲーションボタンの左右方向の位置を指定 */
}

まとめ

以上、スライダーを設置できるライブラリ”Swiper”について紹介してきました。参考になりましたら幸いです。
今回は紹介しきれなかった内容もたくさんありますので、もっと詳しく知りたい方は下記の参考ページも見てみてください。

参考ページ:
Swiper Demos :たくさんのデモが紹介されています。
Swiper API :設定方法などについて詳しく説明されています。

コメントを残す





このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください