swiper.jsでのpaginationのカスタマイズについて

swiper.jsにてpagination部分の数字部分をそれぞれ別の言葉に変えたいのですが
変え方がわかりません。。。

「1　2　3　...」
では数字の連番ではなく、

「昨日　今日　明日」
のようにそれぞれ変更したく思います。

誰か解決策が分かる方いらっしゃいましたら教えて下さい(>_<)

よろしくお願いいたします。

No.1 ベストアンサー 回答者： fujillin 回答日時： 2015/12/21 17:47

swiperではパラメータにpaginationBulletRenderを設定することで、ユーザが自由にpagenationを生成することができるようになっているようです。

指定したfunctionから、設定したい内容のHTML文字列を返すようにすればよいと思われます。
http://www.idangero.us/swiper/api/


具体的な例としては（ご質問のように、必ず3個で固定されているものとして）
　paginationBulletRender: function (index, className) {
　　return '<span class="' + className + '">' + ["昨日","今日","明日"][index] + '</span>';
　}
のような設定で可能と思います。
（質問者様の必要とするマークアップによって、調整する必要がありますが）


以前、似た内容の質問がありました。
https://oshiete.goo.ne.jp/qa/9116064.html

この回答へのお礼

なるほどですね！
大変助かりました！
無事思い通りの動作ができました。

本当にありがとうございました！(*^^*)

お礼日時：2015/12/21 19:53