Как сделать так, чтобы в Swiper JS одновременно отображались пагинация с фракцией и прогрессбар?

Question

[Norum]

Как сделать так, чтобы одновременно отображался прогрессбар с линией прогресса и числовое отображение активного слайда из общего числа слайдов? Я пытался решить этот вопрос по видео, но прописав тот же самый код JS, почему-то всплывает ошибка Uncaught ReferenceError: myImageSLider is not defined. Так как по умолчанию одновременная работа прогрессбара и пагинации с фракцией невозможна, в свойствах pagination я прописал type: 'progressbar' а для числового отображения слайдов я сделал блок .image-slider__fraction в котором и разместил все элементы. Так как я в JS не силен, прошу вас помочь разобраться в чем проблема или предложить более правильное решение.

PS то самое видео https://youtu.be/ddbxsrGPRY0?t=2898

Сайт ilyin1ib.beget.tech

Весь код https://jsfiddle.net/qav8z7f3/

<div class="image-slider__fraction">
                        <div class="image-slider__current">1</div>
                        <div class="image-slider__sepparator">/</div>
                        <div class="image-slider__total">1</div>
</div>

let mySliderAllSlides = document.querySelector('.image-slider__total');
    let mySliderCurrentSlide = document.querySelector('.image-slider__current');
 
    mySliderAllSlides.innerHTML = myImageSLider.slides.length;
 
    myImageSLider.on('slideChange',  function() {
        let currentSlide = ++myImageSLider.realIndex;
        mySliderCurrentSlide.innerHTML = currentSlide;
    });