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

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

$(document).ready(function() {
 
 
  $(".main-gal.owl-carousel").owlCarousel({
    autoplay: true,
    slideSpeed: 9000,
    items: 1,
    autoHeight: true,
    loop: true,
    nav: false,
    navText: ["<i class='fas fa-chevron-left'></i>", "<i class='fas fa-chevron-right'></i>"],
    center: true,
    dots: true,
    responsiveClass: true,
    smartSpeed: 400,
    margin: 0,
    responsive: {
      0: {
        items: 1,
        margin: 0,
        dots: false,
        nav: true
      },
      768: {}
    }
  });
 
 
  const swiper = new Swiper('.image-slider', {
    // Optional parameters
    slidesPerView: 3,
    spaceBetween: 30,
    direction: 'horizontal',
    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,
    }
  });
 
 
 
  $('.owl-prev').on('click', function(event) {
    event.preventDefault();
    $(this).css("color", "#FF5722")
    $('.owl-next').css("color", "#000")
  });
 
 
  $('.owl-next').on('click', function(event) {
    event.preventDefault();
    $(this).css("color", "#FF5722")
    $('.owl-prev').css("color", "#000")
  });
 
 
  let mySliderAllSlides = document.querySelector('.image-slider__total');
  let mySliderCurrentSlide = document.querySelector('.image-slider__current');
 
  mySliderAllSlides.innerHTML = swiper.imagesLoaded;
 
  swiper.on('slideChange', function() {
 
    let currentSlide = ++swiper.realIndex;
    mySliderCurrentSlide.innerHTML = currentSlide;
  });
 
 
  var $hamburger = $(".hamburger");
  $hamburger.on("click", function(e) {
    $(this).toggleClass("is-active");
    $('.menu_reg_block').toggleClass("menu_reg_block_open");
    $('.content').toggleClass("content_move");
    $('.logo').toggleClass("logo_move");
    $('.bg').toggleClass("bg_show");
  });
 
});