Как сделать пагинацию таймера с помощью ползунка Swiper

Question

Теперь я пытаюсь сделать слайд свайпером с разбивкой на страницы по таймеру. Я получил разбиение на страницы по таймеру.

Теперь скорость разбиения на страницы моего таймера не такая, как продолжительность слайдера.

а также не работает в событии щелчка ㅜㅜ.

Вот что у меня есть на данный момент:

Это раздел HTML

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

и раздел CSS

html,
body {
  position: relative;
  height: 100%;
}

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-button-next, .swiper-button-prev {
  color: #000;
}

.swiper-slide {
  background-position: center center;
  background-size: cover;
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-pagination-bullet {
  position: relative;
  width: 150px;
  display: inline-block;
  z-index: 1;
  height: 10px;
  border-radius:0;
  background:#eaeaea;
  opacity:1;  
}

.inProgress {background-color:blue; width:0%; height:10px; opacity:1;}

и javascript здесь

$(document).ready(function(){
  var _is_speed = 3000;
  var swiper = new Swiper('.swiper-container', {
    speed: 1000,
    autoplay: {
      delay:_is_speed,
      waitForTransition: true,
      disableOnInteraction: false,
    },
    loop: true,
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
      bulletActiveClass:'active',
      renderBullet: function(index, className) {
        return '<span class="'+className+'"></span>';
      },
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
  
  //ticking machine
    var percentTime;
    var tick;
    var time = 1;
    var progressBarIndex = 0;

    $('.swiper-pagination .swiper-pagination-bullet').each(function(index) {
        var progress = "<div class='inProgress inProgress" + index + "'></div>";
        $(this).html(progress);
    });

    function startProgressbar() {
        resetProgressbar();
        percentTime = 0;
        tick = setInterval(interval, 10);
    }

    function interval() {
        if ($('.swiper-slide').hasClass('swiper-slide-active') === "true" ) {
            progressBarIndex = $('.swiper-slide').data("swiper-slide-index");          
            startProgressbar();
        } else {
            percentTime += 1 / (time + 5);
            $('.inProgress' + progressBarIndex).css({
                width: percentTime + "%",
            });
            if (percentTime >= 100) {
                $('.swiper-slide').hasClass('swiper-slide-active');
                progressBarIndex++;
                if (progressBarIndex > 2) {
                    progressBarIndex = 0;
                }
                startProgressbar();
            }
        }
    }

    function resetProgressbar() {
        $('.inProgress').css({
            width: 0 + '%'
        });
        clearInterval(tick);
    }
    startProgressbar();
    // End ticking machine

    $('.swiper-pagination span').click(function () {
        clearInterval(tick);
        var goToThisIndex = $(this).find("span").data("tabindex");
        swiper.slideNext();
        startProgressbar();
    });
  
});

https://codepen.io/mirabo333/pen/qBZyxPj

Любая помощь будет принята с благодарностью.