1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-04-08

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

公式サイトでは以下の通り。
https://swiperjs.com/demos#pagination-fraction
(なお、IEに関してはV5系以上からサポート外となったため、IEでも使用したい場合はv4.5.1以前のものを使用して下さい。)
スクリーンショット 2021-04-03 12.45.25.png

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

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?