Как добавить в слайды их номера и общее количество?

Question

[cupacabka]

Делаю слайдер. По макету каждый слайд имеет счетчик pagination-fraction. Вроде по части верстки удалось решить все. Сделал слайдер, разместил пагинацию внутри каждого элемента слайдера. Проблема в том, что выводится по макету сразу три слайда на экране, и вот когда активен первый слайд, то на всех слайдах указывается 1/6. соответственно когда второй активен - указывается на всех 2/6. Как решить проблему?

pagination: {
        el: ".swiper-pagination",
        type: "fraction",
        renderFraction: function (currentClass, totalClass, ) {
          return '<span class="'  +  currentClass + '"></span>' + "  " + '<span class="' + totalClass + '"></span>';
        },
        formatFractionCurrent: function (number) {
          if (number < 10) {
            number = "0" + number;
          }
          return number;
        },
        formatFractionTotal: function (number) {
          if (number < 10) {
            number = "0" + number;
          }
          return number;
        },
      },

Это вообще пагинацией делается, либо счетчик сделать количества слайдов?

Answer 1

[0xD34F]

Куда надо выводить номера слайдов:

const counterSelector = 'селектор элементов внутри слайдов, где должны отображаться их номера';

Выводим:

document.querySelectorAll(counterSelector).forEach((n, i, a) => {
  n.textContent = `${i + 1} / ${a.length}`;
});

Это если делать до инициализации слайдера (const swiper = new Swiper(...);), или среди его настроек отсутствует loop: true. В противном случае для вычисления количества слайдов придётся отбросить дубликаты, а индексы надо будет доставать из data-атрибута (UPD. Неактуально, начиная с девятой версии - дублирования слайдов больше нет):

const slidesCount = swiper
  .slides
  .filter(n => !n.matches('.swiper-slide-duplicate'))
  .length;

swiper.slides.forEach(n => n
  .querySelector(counterSelector)
  .innerText = `${-~n.dataset.swiperSlideIndex} / ${slidesCount}`
);

Comments

[cupacabka]

Спасибо большое