Таймер индикатора выполнения для карусели Materialise с автозапуском - PullRequest
Новая
       10

Таймер индикатора выполнения для карусели Materialise с автозапуском

0 голосов
/ 03 сентября 2018

Я пытаюсь создать таймер индикатора выполнения для карусели 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 + "%");
  }
});

Спасибо!

...