Swiper JS with Progress bar and fraction

index.html

<div class="swiper">
    <div id="fraction" class="swiper-fraction"></div> 
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="/asset/image/slide-01.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="/asset/image/slide-02.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="/asset/image/slide-03.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="/asset/image/slide-04.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="/asset/image/slide-05.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="/asset/image/slide-06.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="/asset/image/slide-07.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="/asset/image/slide-08.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="/asset/image/slide-09.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="/asset/image/slide-10.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="/asset/image/slide-11.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="/asset/image/slide-12.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="/asset/image/slide-13.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="/asset/image/slide-14.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="/asset/image/slide-15.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="/asset/image/slide-16.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="/asset/image/slide-17.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="/asset/image/slide-18.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="/asset/image/slide-19.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="/asset/image/slide-20.jpg" alt="">
      </div>
    </div>
    <div class="swiper-pagination"></div>

    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>

<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>

main.css

html,
body {
  position: relative;
  height: 100%;
}


body {
    background: #000;
    color: #fff;
    line-height: 1.5;
    font-family: "Helvetica Neue",Helvetica,Arial,"Segoe UI",Roboto,sans-serif;
    
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
}

.swiper-slide {
  font-size: 18px;
  text-align: center;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.swiper-button-prev,
.swiper-button-next {
  color: #fff;
}

  .swiper .swiper-pagination * {
    background: crimson;
  }

.swiper-pagination-bullet {
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  color: #fff;
  opacity: 1;
  background: rgba(0, 0, 0, 0.2);
}

.swiper-pagination-bullet-active {
  color: #fff;
  background: crimson;
}

.swiper-fraction {
  background: rgba(0, 0, 0, 0.5);
  color: white;
  position: absolute;
  right: 1em;
  top: 1em;
  z-index: 10;
  padding: 10px 15px;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: bold;
}

script.js

const fraction = document.getElementById("fraction");
const slides = document.querySelectorAll(".swiper-slide");
const slideCount = slides.length;
fraction.textContent = `1 / ${slideCount}`;
 
  const swiper = new Swiper('.swiper', {
    autoplay: {
      delay: 2000,
    },

    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
      
    loop: true,
    slidesPerView: 3,
    spaceBetween: 10,


    pagination: {
      el: '.swiper-pagination',
      type: "progressbar",
      },
      
    on: {
    slideChange: () => {
      fraction.textContent = `${swiper.realIndex + 1} / ${slideCount}`;
    } }
  });