Как вывести количество слайдов (renderFration) в слайдере Swiper в виде «1 — 4 из 12»?

Question

[jessok2019]

У меня выводиться сразу на экран 4 слайда (карточки товаров), как сделать, чтобы количество слайдов выводилось в виде 1 - 4 из 12 моделей?

А сейчас считает количество возможных пролистываний, например у меня 6 товаров (4 сразу на экране, 2 скрыто), то подсчет будет 1 из 3, что вообще сбивает с толку.

Вот какой сейчас код:

var swiper1 = new Swiper('.swiper1', {
      slidesPerView: 4,
      spaceBetween: 30,
	  observer: true,
	  observeParents: true,
	  grabCursor: true,
      pagination: {
        el: '.swiper-pagination1',
		type: 'fraction',
        clickable: true,
		renderFraction: function (currentClass, totalClass) {
                return '<span class="' + currentClass + '"></span>' +
                    ' из ' +
                    '<span class="' + totalClass + '"></span>';
            } 
      },
	    navigation: {
        nextEl: '.swiper-button-next1',
        prevEl: '.swiper-button-prev1',
      },
	   breakpoints: {
        1200: {
          slidesPerView: 3,
          spaceBetween: 30,
        },
		992: {
          slidesPerView: 2,
          spaceBetween: 30,
        },
        768: {
          slidesPerView: 2,
          spaceBetween: 30,
        },
        576: {
          slidesPerView: 1,
          spaceBetween: 60,
        },
        320: {
          slidesPerView: 1,
          spaceBetween: 60,
        }
      }
    });

Answer 1

[0xD34F]

function updateFraction(slider) {
  const { params, activeIndex } = slider;

  slider.$el
    .find(`.${params.pagination.currentClass}`)
    .text(`${activeIndex + 1} - ${activeIndex + params.slidesPerView}`);

  slider.$el
    .find(`.${params.pagination.totalClass}`)
    .text(slider.slides.length);
}

on: {
  init() {
    setTimeout(updateFraction, 0, this);
  },
  slideChange() {
    updateFraction(this);
  },
  resize() {
    updateFraction(this);
  },
},

https://jsfiddle.net/1xLrtyqw/