Как сделать такую пагинацию свайпера?

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]

Никакая это не пагинация.

document
  .querySelectorAll('селектор элементов внутри слайдов, где должны отображаться их номера')
  .forEach((n, i, a) => n.innerText = `${i + 1} / ${a.length}`);

Comments

[cupacabka]

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