Swiperのページネーションのドットをスライド毎に個別に装飾する方法

2023年8月17日

masu

JavaScriptのスライダーライブラリであるSwiperにおいて、ページネーションのドットをカスタマイズする方法をご紹介しています。

今回はページネーションのドットをスライドに応じて装飾する方法です。スライドの内容とドットの見た目を一致させたい場合などに有効です。

スライド毎にドットを装飾した例

各スライドがアクティブになった時のドットの背景色を変更してみました。

デモページ

スライド番号とドットの背景色の組み合わせ

1枚目：赤
2枚目：青
3枚目：緑
4枚目：黄色
5枚目：ピンク

カスタマイズがわかりやすいように、ドットの大きさと形状も変更しています。

コードの見本

SwiperをCDNの形式でindex.html内で読み込んでいます。

headタグ内

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />

bodyタグの終了直前

<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>

index.html

<div class="swiper slider">
    <ul class="swiper-wrapper">
        <div class="swiper-slide"><img src="./images/01.jpg" alt="サンプル画像"></div>
        <div class="swiper-slide"><img src="./images/02.jpg" alt="サンプル画像"></div>
        <div class="swiper-slide"><img src="./images/03.jpg" alt="サンプル画像"></div>
        <div class="swiper-slide"><img src="./images/04.jpg" alt="サンプル画像"></div>
        <div class="swiper-slide"><img src="./images/05.jpg" alt="サンプル画像"></div>
    </ul>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

style.css

/* ==========================
  画像サイズ調整
========================== */
.swiper-slide {
  height: auto;
}

.swiper-slide img {
  height: 100%;
  width: 100%;
}

/* ==========================
  ドットの間隔を調整
========================== */
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 5px;
}

/* ==========================
  ドットのサイズと色を変更
========================== */
.swiper-pagination-bullet {
  background-color: #fff;
  width: 50px;
  height: 10px;
  border-radius: 0;
}

/* ================================
  各スライドに対応するドットの背景色を変更
================================ */
.swiper-pagination-bullet:nth-of-type(1).swiper-pagination-bullet-active {
  background-color: red;
}

.swiper-pagination-bullet:nth-of-type(2).swiper-pagination-bullet-active {
  background-color: blue;
}

.swiper-pagination-bullet:nth-of-type(3).swiper-pagination-bullet-active {
  background-color: green;
}

.swiper-pagination-bullet:nth-of-type(4).swiper-pagination-bullet-active {
  background-color: yellow;
}

.swiper-pagination-bullet:nth-of-type(5).swiper-pagination-bullet-active {
  background-color: pink;
}

script.js

const swiper = new Swiper('.slider', {
    spaceBetween: 15,
    slidesPerView: 2,
    centeredSlides: true,
    loop: true,
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    autoplay: {
        delay: 3000,
        disableOnInteraction: false,
    },
    speed: 1000,
})

コードの解説

HTMLとJavaScriptは一般的な内容のため説明を割愛させていただきます。

CSSではnth-of-typeの擬似クラスを用いて、swiper-pagination-bulletの番号を指定し、アクティブになった際の背景色をそれぞれ指定しています。

.swiper-pagination-bullet:nth-of-type(1).swiper-pagination-bullet-active {
  background-color: red;
}

非アクティブ時には白にしたいので、背景色の指定をswiper-pagination-bullet-activeに対して行っています。

非アクティブ時にも各々で装飾したい場合には、swiper-pagination-bulletに対して直接スタイルをあてればOKです。

今回のカスタマイズは以上です。

最後に

デザインカンプを受領した際にドットの色が違うことに気づき、「どうすればいいのだろう」と少し悩みましたが、手を動かしてみると意外と簡単に実装することができました。

今回はドットの色をスライド番号毎に変更してみました。同じ方法で背景色の変更以外にも様々なカスタマイズができそうです。