Swiperのページネーション（分数表記）の「/」を「-」に変更したい

Question

実現したいこと

Swiperのページネーション（分数表記）の「/」を「-」に変更したいです。
1/3　→　1 - 3のような形に変更したいということ。

現状

Swiperで以下のようにページネーションを設定すると、デフォルトのドットから分数表記に変わると思います。

    // ページネーション
    pagination: {
        el: '.swiper-pagination',
        type: "fraction",
    },

今回はその分数表記の/を-（ハイフン）へ変更したいという旨の依頼が規定対応していましたが、中々うまく変更できず難儀しております。
もしお分かりの方がいらっしゃいましたら、変更の方法をソースコードのレビューも含めて詳細に教えていただけると幸いです。（※参考ページなどあればそれでも問題ありません。）

試したこと

かなり色々調べてみましたが、全くと言っていいほど同じような変更を加えている参考記事がないため、ページネーションにIDをつけてJSで中身を変更してみたりもしましたが、数字が消えたりしてダメでした。

Answer 1

pagination.renderFraction に関数を渡すとhtmlを好きなように加工できるようです。

pagination: {
  el: ".swiper-pagination",
  type: "fraction",
  renderFraction: (currentClass, totalClass) => {
    return `<span class="${currentClass}"></span> - <span class="${totalClass}"></span>`;
  },
},

参考：
https://swiperjs.com/swiper-api#param-renderFraction
https://github.com/nolimits4web/swiper/blob/v11.0.5/src/modules/pagination/pagination.mjs#L286-L295

Comments

[mya]

ありがとうございます！解決できました！