Splideスライダーのページネーションをカスタマイズする

Splide.jsで作成したスライダーのページネーションをカスタマイズしたい時があると思います。
当記事ではページネーションの色・位置・サイズ・画像の変更方法に加えて、ドットに数字を入れたり、分数表記にしたり、プログレスバーにしたりする方法について記します。

通常のSplide.jsでのスライダーの作成はご存じの前提で進めさせていただきますので、Splide.jsを初めて使う方はこちらから先に参照いただければと思います。
Splide.jsでシンプルなスライダーを作成する

通常のSplideスライダーを作成する
ページネーションの色を変更する
ページネーションの位置を変更する
ページネーションのサイズを変更する
ページネーションを画像で置き換える
ページネーションのドットに数字を入れる
ページネーションを分数表記にする
ページネーションをプログレスバーにする

通常のSplideスライダーを作成する

わかりやすいように、最初に通常のSplideスライダーを作成して、そこから変更を加えていきます。

<link href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4/dist/css/splide.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4/dist/js/splide.min.js"></script>

<style>
    .sample-slider {
        width: 70%;
        margin: 0 auto;
    }
    .sample-slider img {
        width: 100%;
    }
</style>

<div class="splide sample-slider">
    <div class="splide__track">
          <ul class="splide__list">
              <li class="splide__slide"><img src="./img/sample1.png"></li>
              <li class="splide__slide"><img src="./img/sample2.png"></li>
              <li class="splide__slide"><img src="./img/sample3.png"></li>
          </ul>
    </div>
</div>

<script>
    new Splide('.sample-slider', {
        type : 'loop',
    }).mount()
</script>

通常のSplideスライダーができました。

ページネーションの色を変更する

Splide.jsではsplide__pagination__pageクラスでページネーションの色を指定する事ができます。
opacity: 0.7がすべてのページネーションにかかってしまっているので、アクティブなページネーションのみ透過を無効にします。
また、非アクティブなページネーションの透過率を上げておくとより見やすくなります。

.sample-slider .splide__pagination__page {
    background: yellow;     /* ページネーションの色を指定 */
    opacity: .4;            /* 非アクティブなページネーションの透過率を上げる */
}
.sample-slider .splide__pagination__page.is-active {
    opacity: 1;             /* アクティブなページネーションの透過を無効にする */
}

ページネーションの色を変更する事が出来ました。

ページネーションの位置を変更する

ページネーションの位置はsplide__paginationクラスで変更する事ができます。
bottom: 0.5emがデフォルトで指定されているので、例えばより小さい値を指定すれば、ページネーションが下に移動します。

.sample-slider .splide__pagination {
    bottom: -1em;
}

ページネーションの位置を変更する事が出来ました。

また、bottomプロパティを初期化して、topプロパティで上からの位置を指定する事もできます。

.sample-slider .splide__pagination {
    bottom: initial;
    top: 1em;
}

ページネーションのサイズを変更する

ページネーションのサイズはsplide__pagination__pageクラスのwidthとheightで指定できます。
ドット同士の間隔を開けたい場合は、splide__paginationクラスのgapプロパティを指定します。
また、Splide.jsではアクティブなページネーションのサイズが大きくなっていますが、transform: scale(1) を追加する事で、サイズを統一する事もできます。

.sample-slider .splide__pagination {
    gap: 10px;              /* ページネーションの間隔 */
}
.sample-slider .splide__pagination__page {
    width: 30px;            /* ページネーションの横幅 */
    height: 30px;           /* ページネーションの縦幅 */
}
.sample-slider .splide__pagination__page.is-active {
    transform: scale(1);    /* ページネーションのサイズを統一 */
}

ページネーションのサイズを変更する事が出来ました。

ページネーションを画像で置き換える

ページネーションを任意の画像で置き換えたい時があると思います。
デフォルトで入っているborder-radiusやbackgroundを初期化して、background-imageで画像のパスを指定すればOKです。

.sample-slider .splide__pagination__page {
    border-radius: initial;
    background: initial;
    background-size: 100%;
    background-image: url(./img/pagination_icon.png);
}

ページネーションを画像で置き換える事が出来ました。

ページネーションのドットに数字を入れる

ページネーションのカスタマイズパターンの一つとして、ドットに数字が入っているものがあります。
私も最近知ったのですが、なんとこれCSSだけで出来てしまいます。

.sample-slider .splide__pagination {
    counter-reset: pagination-num;
}
.sample-slider .splide__pagination__page:before {
    counter-increment: pagination-num;
    content: counter( pagination-num );
}

ページネーションのドットに数字を入れる事が出来ました。

ページネーションを分数表記にする

現在位置と総スライド数が分数で表記されたページネーションを作りたい時があると思います。
残念な事にSplide.jsにはページネーションを分数表記にするオプションはないみたいです（2024年3月時点）。
でも安心してください、イベントハンドラを使用して実現する事ができます。

const sample_slider = new Splide('.sample-slider', {
    type : 'loop',
})

sample_slider.on('mounted move', function(){
    const s = sample_slider
    const pagination = s.root.querySelector('.splide__pagination')
    pagination.innerHTML = `<span>${s.index + 1 + ' / ' + s.length}</span>`
})
sample_slider.mount()

サイズはsplide__paginationクラスのfont-sizeプロパティで指定できます。

.sample-slider .splide__pagination {
    font-size: 20px;
}

ページネーションを分数表記にすることができました。

ページネーションをプログレスバーにする

最後にページネーションをプログレスバーにする方法です。
これはHTML・CSS・Javascriptすべてに追記する必要があります。

HTMLにはプログレスバーの枠を置きます。

<div class="splide sample-slider">
    <div class="splide__track">
          <ul class="splide__list">
              <li class="splide__slide"><img src="./img/sample1.png"></li>
              <li class="splide__slide"><img src="./img/sample2.png"></li>
              <li class="splide__slide"><img src="./img/sample3.png"></li>
          </ul>
    </div>
    <!------ ↓ 追加 ↓ ------>
    <div class="progressbar">
        <div class="bar"></div>
    </div>
    <!------ ↑ 追加 ↑ ------>
</div>

CSSでは色、高さ、バーの動くスピードを指定します

.sample-slider .progressbar {
    background: #ccc;
}
.sample-slider .progressbar .bar {
    background: greenyellow;
    transition: 400ms ease;
    height: 6px;
}

Javascriptでは進捗率を計算して、バーを動かします。
また、デフォルトのページネーションを非表示にしておきましょう。

const sample_slider = new Splide('.sample-slider', {
    type : 'loop',
    pagination: false,
})

sample_slider.on('mounted move', function(){
    const s = sample_slider
    const bar = s.root.querySelector('.progressbar .bar')
    bar.style.width = (s.index + 1) / s.length * 100 + '%'
})
sample_slider.mount()

ページネーションをプログレスバーにすることができました。