Почему в Swiper JS пагинация с фракцией не работает?
 

Хочу использовать прогрессбар вместе с пагинацией-фракцией. Для этого создал блок .image-slider__fraction в котором и разместил все элементы. Проблема в том, что он почему-то выдает мне ошибку Uncaught ReferenceError: myImageSLider is not defined. В чем проблема?

Сайт http://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;
    });

myImageSLider определяется где?

я честно не знаю, так как я начинающий и делал это по этому видео, там мужик сказал, что так он получает общее кол-во слайдов

https://youtu.be/ddbxsrGPRY0?t=2898