Swiper

表示中のスライド数／総数を表示

ページネーションのオプション「type: “fraction”」を設定して数値に変更する

HTML

CSS

                  
.swiper__content {
  width: min(100%, 700px);
  margin: 0 auto 50px;
}
.swiper {
  display: flex;
}
.swiper-slide img {
  width: 100%;
  height: auto;
}

script

                  
window.onload = function() {
    const swiper = new Swiper(".swiper", {
        spaceBetween: 20,
        slidesPerView: 1,
        loop: true,
        pagination: {
            el: ".swiper-pagination", // ページネーションのクラス名を指定
            type: "fraction", // ページネーションのtypeを指定。数値に変更。
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });
}