带有自动播放功能的Materialize轮播进度条计时器

Question

我正在尝试为具有自动播放功能的Materialise轮播创建进度条计时器。

在此处查看我的代码笔：https://codepen.io/bvonhalle/pen/EeWZbB

由于某种原因，进度条计时器在每个第三个转盘上都中断。我认为这与功能的时间安排有关。

有人可以帮助我完成这项工作吗？

$(document).ready(function() {
  $(".carousel.carousel-slider").carousel({
    dist: 0,
    padding: 0,
    fullWidth: true,
    indicators: true,
    duration: 300
  });

  setTimeout(autoplay, 8000);

  function autoplay() {
    $(".carousel").carousel("next");
    resetAnimation();
    setTimeout(autoplay, 8000);
  }

  /* Kick off the initial slide animation when the document is ready */
  var hrWidth = 100;

  $(".carousel-progress-bar-timer").css("width", hrWidth + "%");

  function resetAnimation() {
    hrWidth = 0;
    $(".carousel-progress-bar-timer").css("width", hrWidth + "%");
    $("hr").removeClass("animate").addClass("stopanimation");
    setTimeout(startAnimation, 10);
  }

  function startAnimation() {
    hrWidth = 100;
    $("hr")
      .removeClass("stopanimation")
      .addClass("animate");
    $(".carousel-progress-bar-timer").css("width", 100 + "%");
  }
});

谢谢！