Проблема со swiper, не проигрывается не до конца анимация пагинации

Ребят, есть слайдер пока слайды переключаются заполняется полоска пагинации, при загрузке страницы почему-то не проигрывается до конца анимация полоски пагинации, она доходит до половины и слайд переключается на следующий как это можно исправить?

<section class="main__slider page-slider">
    <div class="page-slider-container container">
     <div class="main-page-slider swiper">
        <div class="main-page-wrapper swiper-wrapper">
           <div class="main-page-slide swiper-slide page-slide">
              <div class="page-slide__content">
                 <h1 class="page-slide__title">Айболит
                    круглосуточная 
                    ветклиника</h1>
                 <div class="page-slide__btn-wrapper">
                    <div class="page-slide__button ai-btn">ЗАПИСАТЬСЯ</div>
                 </div>
                 <div class="page-slide__actions">
                    <a href="#!" class="page__slide-action icon-inst"></a>
                    <a href="#!" class="page__slide-action icon-face"></a>
                    <a href="#!" class="page__slide-action icon-vk"></a>
                    <a href="#!" class="page__slide-action icon-you"></a>
                 </div>
                 
              </div>
              <div class="page-slide__number">+7 (8442) 96 22 92</div>
              <div class="page-slide__image">
                 <img src="images/slider/01.png" alt="">
              </div>
           </div>
           <div class="main-page-slide swiper-slide page-slide">
              <div class="page-slide__content">
                 <h1 class="page-slide__title">Комфортные
                    оборудованные
                    стационары</h1>
                 <div class="page-slide__btn-wrapper">
                    <div class="page-slide__button ai-btn">ЗАПИСАТЬСЯ</div>
                 </div>
                 <div class="page-slide__actions">
                    <a href="#!" class="page__slide-action icon-inst"></a>
                    <a href="#!" class="page__slide-action icon-face"></a>
                    <a href="#!" class="page__slide-action icon-vk"></a>
                    <a href="#!" class="page__slide-action icon-you"></a>
                 </div>
                 
              </div>
              <div class="page-slide__number">+7 (8442) 96 22 92</div>
              <div class="page-slide__image">
                 <img src="images/slider/02.png" alt="">
              </div>
           </div>
           <div class="main-page-slide swiper-slide page-slide">
              <div class="page-slide__content">
                 <h1 class="page-slide__title">Новейшее
                    европейское
                    оборудование</h1>
                 <div class="page-slide__btn-wrapper">
                    <div class="page-slide__button ai-btn">ЗАПИСАТЬСЯ</div>
                 </div>
                 <div class="page-slide__actions">
                    <a href="#!" class="page__slide-action icon-inst"></a>
                    <a href="#!" class="page__slide-action icon-face"></a>
                    <a href="#!" class="page__slide-action icon-vk"></a>
                    <a href="#!" class="page__slide-action icon-you"></a>
                 </div>
                 
              </div>
              <div class="page-slide__number">+7 (8442) 96 22 92</div>
              <div class="page-slide__image">
                 <img src="images/slider/03.png" alt="">
              </div>
           </div>
           <div class="main-page-slide swiper-slide page-slide">
              <div class="page-slide__content">
                 <h1 class="page-slide__title">Собственная
                    современная
                    лаборатория</h1>
                 <div class="page-slide__btn-wrapper">
                    <div class="page-slide__button ai-btn">ЗАПИСАТЬСЯ</div>
                 </div>
                 <div class="page-slide__actions">
                    <a href="#!" class="page__slide-action icon-inst"></a>
                    <a href="#!" class="page__slide-action icon-face"></a>
                    <a href="#!" class="page__slide-action icon-vk"></a>
                    <a href="#!" class="page__slide-action icon-you"></a>
                 </div>
                 
              </div>
              <div class="page-slide__number">+7 (8442) 96 22 92</div>
              <div class="page-slide__image">
                 <img src="images/slider/04.png" alt="">
              </div>
           </div>
           <div class="main-page-slide swiper-slide page-slide">
              <div class="page-slide__content">
                 <h1 class="page-slide__title">Аптека и зоомагазин
                    по доступным
                    ценам</h1>
                 <div class="page-slide__btn-wrapper">
                    <div class="page-slide__button ai-btn">ЗАПИСАТЬСЯ</div>
                 </div>
                 <div class="page-slide__actions">
                    <a href="#!" class="page__slide-action icon-inst"></a>
                    <a href="#!" class="page__slide-action icon-face"></a>
                    <a href="#!" class="page__slide-action icon-vk"></a>
                    <a href="#!" class="page__slide-action icon-you"></a>
                 </div>
                 
              </div>
              <div class="page-slide__number">+7 (8442) 96 22 92</div>
              <div class="page-slide__image">
                 <img src="images/slider/05.png" alt="">
              </div>
           </div>
           <div class="main-page-slide swiper-slide page-slide">
              <div class="page-slide__content">
                 <h1 class="page-slide__title">Груминг салон
                    и косметические
                    товары</h1>
                 <div class="page-slide__btn-wrapper">
                    <div class="page-slide__button ai-btn">ЗАПИСАТЬСЯ</div>
                 </div>
                 <div class="page-slide__actions">
                    <a href="#!" class="page__slide-action icon-inst"></a>
                    <a href="#!" class="page__slide-action icon-face"></a>
                    <a href="#!" class="page__slide-action icon-vk"></a>
                    <a href="#!" class="page__slide-action icon-you"></a>
                 </div>
                 
              </div>
              <div class="page-slide__number">+7 (8442) 96 22 92</div>
              <div class="page-slide__image">
                 <img src="images/slider/06.png" alt="">
              </div>
           </div>
           
        </div>
        <div class="page-pagination swiper-pagination"></div>
        
        </div>
     </div>
  </div>
  
  </section>

    var swiper = new Swiper('.main-page-slider', {
   loop:true,
   disableOnInteraction: false,
   autoplay: true,
   draggable: true,
   //freeMode: true,
   autoplay: {
      delay: 2000,
      disableOnInteraction: false,
      initialDelay: 2000,

    },
   speed: 2000,
    pagination: {
      el: ".page-pagination",
      type: "bullets",
      clickable: true,
      renderBullet: (index, className) => {
         return `<span class="${className}">
         <span class="page__bullet-value">${index + 1}</span>
          <svg class="page__svg-wrapper" width="45" height="45">
            <circle class="page__svg-circle" fill="transparent" stroke="black" stroke- 
  width="4" cx="22.5" cy="22.5" r="18.5"/>
          </svg>
         </span>`;
       },
     
   }
 });

 let swiperSlide = document.querySelectorAll('.main-page-slide');
 let swiperPag = document.querySelectorAll('.page-pagination .swiper-pagination-bullet');
 for (let index = 0; index < swiperSlide.length; index++) {
   swiperSlide[index].addEventListener("mouseenter", function () {
 

        let curr = swiperPag[index].querySelector('.page__svg-circle').classList.add("pause");
         swiper.autoplay.stop();
       });
    
       swiperSlide[index].addEventListener("mouseleave", function () {
          let curr = swiperPag[index].querySelector('.page__svg- 
 circle').classList.remove("pause");
         swiper.autoplay.start();
       })

;
 }

.main {

   &__slider {
      height: 100vh;
   }
}
.page-slider {
}
.page-slider-container {
   height: 100%;
}
.main-page-slider {
   height: 100%;
 
   
}
.swiper {
}
.main-page-wrapper {
   
}
.swiper-wrapper {
}
.main-page-slide {
   position: relative;
   
}
.swiper-slide {
}
.page-slide {

   &__content {
      max-width: 645px;
      position: relative;
      left: 415px;
      top: 316px;
   }

   &__title {
      font-family: 'Montserat';
      font-style: normal;
      font-weight: 400;
      font-size: 80px;
      line-height: 138%;
      margin-bottom: 50px;
      color: #080606;
   }

   &__btn-wrapper {
      margin-bottom: 197px;
      max-width: 284px;
   }

   &__button {
   }

   &__actions {
      max-width: 310px;
      width: 100%;
      display: flex;
      justify-content: space-between;
   }

   &__number {
      font-family: 'Montserat';
      font-style: normal;
      font-weight: 700;
      font-size: 24px;
      line-height: 125%;
      color: #59443F;
      position: absolute;
      bottom: 80px;
      right: 80px;
      z-index: 2;
   }

   &__image {
      position: absolute;
      bottom: 0;
      right: 0;
      max-width: 833px;
      max-height: 786px;
      img {
         display: block;
         max-width: 100%;
      }
   }
}
.ai-btn {
   font-family: 'Montserat';
   font-style: normal;
   font-weight: 700;
   font-size: 20px;
   line-height: 100%; 
   color: #FFFFFF;
   background: #FFC59E;
   box-shadow: 0px 4px 20px #FFC59E;
   border-radius: 33.5px;
   padding: 24px 77px;
   }
.page {

   &__slide-action {
      position: relative;
      width: 40px;
      height: 40px;
      &::before {
         position: absolute;
         display: block;
         font-size: 40px;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
         color: #C3B9B5;
   }
}

.icon-inst {
   
}
}
.icon-face {
}
.icon-vk {
}
.icon-you {
}

.page-pagination.swiper-pagination-bullets {
   position: absolute;
   top: 310px;
   left: 25px;
   width: 50px;
   display: inline-flex;
   flex-direction: column;
   row-gap: 70px;
}
 .swiper-pagination-bullet {
   font-family: 'Montserat';
   font-style: normal;
   font-weight: 700;
   font-size: 20px;
   line-height: 100%;
   color: #080606;
   //transition: opacity 1.5s ease 0s;
   position: relative;
   background-color: transparent;
   display: block;
   width: 40px;
   min-height: 40px;
   //background-color: #EDE9E8;
   &.swiper-pagination-bullet-active {
      border: 4px solid #EDE9E8;

   }
   &::before {
      content: '';
      position: absolute;
      display: block;
      width: 34px;
      height: 34px;
      //background-color: #fffefe;
      border-radius: 50%;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
   }
   .page__svg-circle {
      stroke-width: 0;
   }
   &.swiper-pagination-bullet-active {
      .page__svg-circle {
         stroke-width: 4;
      }
   }
 }
.page__bullet-value {
   display: block;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}
 
 .page__svg-wrapper {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }

 .page__svg-circle {
   
   transform-origin: center;
   transform: rotate(-90deg);
   stroke-dasharray: 116.233 116.233;
   stroke-dashoffset: 0;

 }
 
 .page-pagination .swiper-pagination-bullet-active .page__svg-circle{
   animation: 4s circletimer linear;
 }
 .page-pagination .swiper-pagination-bullet-active .page__svg-circle.pause {
   animation-play-state: paused;
 }
 @keyframes circletimer {
   0% {
      stroke-dasharray: 116.233 116.233;
      stroke-dashoffset: 116.233;
   }
   100% {
      stroke-dasharray: 116.233 116.233;
      stroke-dashoffset: 1;
   }
 }