swiperのpaginationに0を付けて表示したい

4725 ワード
HTML swiper JavaScript jQuery CSS HTML テキストリンク

はじめに

先日の案件で、swiperのpaginationに0を付けて表示したいという要望があった。

公式サイトでは以下の通り。
https://swiperjs.com/demos#pagination-fraction
（なお、IEに関してはV5系以上からサポート外となったため、IEでも使用したい場合はv4.5.1以前のものを使用して下さい。）

See the Pen swiper default by dan (@___dan) on CodePen.

今回は、「1/10」となっている箇所を、「01/10」となるように実装する。

実装編

formatFractionCurrentというパラメーターが存在し、それを使うと現在のnumberの値を取得できるみたい。
今回は、numberに0を加えたいので、paginationを以下のように実装した。

pagination: {
    el: '.swiper-pagination',
    type: 'fraction',
    formatFractionCurrent: function (number) {
        return '0' + number;
    }
}

これで、「01/10」のような形に出来上がり。


See the Pen
swiper fraction by dan (@___dan)
on CodePen.


補足

スライドの個数が10個以上のときを考慮して、少し条件分岐を加える必要がある。
（今のままでは、10以上の数値のときに「010/10」となってしまうため。）

取得したnumberの値が10以下のみ、0を加えるようif文で条件式を追加。
これで、思った通りの形になりました。

formatFractionCurrent: function (number) {
    if (number < 10) {
        return '0' + number;
    } else {
        return number;
    }
}

See the Pen swiper fraction > 10 by dan (@___dan) on CodePen.

参考記事

下記のサイトから、パラメーターを検索しました。
https://www.tutorialdocs.com/tutorial/swiper/api-pagination.html