[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);
    });