はじめに
先日の案件で、swiperのpaginationに0を付けて表示したいという要望があった。
公式サイトでは以下の通り。
https://swiperjs.com/demos#pagination-fraction
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
↧