Почему при пролистывании Swiper JS назад слайды отображаются неверно?

[Tempest]

Я хотел сделать так, чтобы в Swiper JS работали одновременно пагинация с фракцией и прогрессбар. Но в пагинации с фракцией возникла проблема: при пролистывании слайдов о обратном порядке почему-то слайд который был третьим в пагинации с фракцией отображается, как 1 или 2 и тоже самое с другими слайдами. На картинке, которую я прикрепил данный слайд является первым, а при пролистывании назад отображается 3.

Сам сайт http://cn39614.tmweb.ru/
Весь код https://jsfiddle.net/k8L9t4j3/

<section class="spaces">
        <div class="wrapper">
            <div class="content">
                <div class="spaces-title">
                    <h3>Our Spaces</h3>
                    <p>Our space is designed to give you a different experience when working with your team or personally</p>
                    <div class="plug"></div>
                </div>
                <div class="image-slider swiper-container">
                    <div class="image-slider__wrapper swiper-wrapper">
                        <!-- Slides -->
                        <div class="image-slider__slide swiper-slide">
                            <div class="image-slider__image one">
                                <img src="img/space-1.jpg" alt="1">
                            </div>
                        </div>
                        <div class="image-slider__slide swiper-slide">
                            <div class="image-slider__image">
                                <img src="img/space-2.jpg" alt="2">
                            </div>
                        </div>
                        <div class="image-slider__slide swiper-slide">
                            <div class="image-slider__image">
                                <img src="img/space-3.jpg" alt="3">
                            </div>
                        </div>
                        <div class="image-slider__slide swiper-slide">
                            <div class="image-slider__image">
                                <img src="img/space-4.jpg" alt="4">
                            </div>
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                    <div class="image-slider__fraction">
                        <div class="image-slider__current"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

var totalSlide = $('.image-slider .swiper-slide').length;
    const swiper = new Swiper('.image-slider', {
        // Optional parameters
        slidesPerView: 3,
        spaceBetween: 30,
        centeredSlides: true,
        loop: true,
        loopedSLides: 3,
        simulateTouch: true,
        grabCursor: true,
        speed: 800,
        pagination: {
            el: '.swiper-pagination',
            type: 'progressbar'
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        autoplay: {
            delay: 1000,
        }
    });


    swiper.on('slideChange', function() {
        var fragment = document.querySelector('.image-slider__current');
        var current = parseInt($('.swiper-slide-active img').attr('alt')) + 1;
        if (current > totalSlide)
            current = 1;
        var idx = current < 10 ? ("0" + current) : current;
        var tdx = totalSlide < 10 ? ("0" + totalSlide) : totalSlide;
        fragment.innerHTML = (idx + '/' + tdx);
    });

[рони]

Почему

большинство плагинов используют клонирование элементов, для создания эффекта непрерывности обычно их по два слева и справа
было 12345 станет 451234512

[Tempest]

и как это исправить?

[рони]

и как это исправить?

читать документацию ... а пока можно попробовать так

function() {
     var fragment = document.querySelector('.image-slider__current');
     var idx = this.realIndex + 1;
     var tdx = this.slides.length - 2;
     fragment.innerHTML = (idx.toString().padStart(2,'0') + '/' + tdx.toString().padStart(2,'0'));
}

[Tempest]

рони, Вставил этот код и слайдер и пагинация вообще исчезли.
https://jsfiddle.net/2wqjfL4a/

[рони]

Tempest,
код написан для вашего сообщения #1;

swiper.on('slideChange', function(){
    var fragment = document.querySelector('.image-slider__current');
    var idx = this.realIndex + 1; 
    var tdx = Array.from(this.slides).filter(({classList}) => !classList.contains('swiper-slide-duplicate') ).length;
    fragment.innerHTML = (idx.toString().padStart(2,'0') + '/' + tdx.toString().padStart(2,'0'));
    });