猫头鹰轮播-如何在轮播的同时暂停进度栏

Question

我正在使用Owl Carousel（我相信v2），目前已对其进行了设置，以便当用户悬停或单击它时，carousel会暂停。

但是，似乎进度条并不受该行为的束缚，因此继续正常进行。

我需要使用一种设置，还是将两个方面绑定在一起的方法？ （抱歉，JavaScript不是我的强项，所以不确定如何将2个元素连接到相同的行为）

我的HTML是：

<!-- Start promo carousel -->
   <div class="owl-carousel owl-theme"> 

     <div class="item article">
       <h2>Some content here</h2>
       <p><a href="#" class="btn">Read more</a></p>
     </div>

     <div class="item article">
       <h2>Some more content here</h2>
       <p><a href="#" class="btn">Read more</a></p>
     </div>

   </div>
   <div class="slide-progress"></div>
   <!-- End promo carousel -->

我的JS代码是：

initSlider();

function initSlider() {
   $(".owl-carousel").owlCarousel({
      items: 1,
      loop: true,
      autoplay: true,
      autoplayTimeout: 10000,
      autoplayHoverPause: true,
      nav: true,
      onInitialized: startProgressBar,
      onTranslate: resetProgressBar,
      onTranslated: startProgressBar
   });
}

function startProgressBar() {
   // apply keyframe animation
   $(".slide-progress").css({
      width: "100%",
      transition: "width 10000ms linear"
   });
}

function resetProgressBar() {
   $(".slide-progress").css({
      width: 0,
      transition: "width 0s"
   });
}