Показывать текущий номер слайда, если таких слайдов на экране много

Question

Есть макет, при котором нужно пользователю показывать номер текущего слайда, при том что одновременно на экране может показываться больше двух слайдов. Вывод для одного слайда сделал, но как сделать чтобы оставшиеся слайды увеличивали свое значение?

<div class="swiper-slide">
  <h1>@name</h1>
  <div class="sliderCounter">
    0/0
  </div>
</div>
<div class="swiper-slide">
  <h1>@name</h1>
  <div class="numberSlides">
    0/0
  </div>
</div> ...

swiper.on('transitionEnd', function() {
 console.log('start', swiper.realIndex );
    var offer = document.querySelectorAll('.sliderCounter');
    for (let i = 0; i < offer.length; i++) {
        offer[i].innerHTML = (swiper.realIndex +  1) + '/' + swiper.slides.length;
    }
});

Answer 1

А зачем изобретать велосипед, когда такое возможно "из под коробки", достаточно немного посмотреть документацию..

var swiper = new Swiper(".mySwiper", {
  pagination: {
    el: ".swiper-pagination",
    type: "fraction",
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

.swiper {
  width: 400px;
  height: 250px;
}

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

<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css" rel="stylesheet" />

<div class="swiper mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <div class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
    <div class="swiper-slide">Slide 7</div>
    <div class="swiper-slide">Slide 8</div>
    <div class="swiper-slide">Slide 9</div>
  </div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-pagination"></div>
</div>

БЛОГ НА HUSL

Показывать текущий номер слайда, если таких слайдов на экране много

Ответы (1 шт):