Таймер окружность до следующего слайда slick slider: как задать таймер каждому слайду

$(document).ready(function() {

  let slider = $('.slider');

  $('.slider').slick({
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    swipe: false,
    arrows: false,
    dots: true,
    customPaging: function(slider, i) {
      var thumb = $(slider.$slides[i]).data('number');
      return '<a class="slider-dots__link"><div class="slider-dots__wrapper"><div class="slider-dots__circle"><div class="slider-dots__circle-inner"></div> </div><div class="slider-dots__digit">' + thumb + '</div></div></a>';
    },
    appendDots: $('.slider-dots'),
  });
});

.slick-dots {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wrapper {
  position: relative;
}

.slider-dots {
  position: absolute;
  left: 20px;
  top: 80px;
  z-index: 10;
}

.slider-dots__link {
  display: block;
  cursor: pointer;
}

.slider-dots__wrapper {
  display: flex;
  align-items: center;
  opacity: 0.4;
}

.slick-active .slider-dots__wrapper {
  opacity: 1;
}

.slider-dots__circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 23px;
  height: 23px;
  border: solid 2px transparent;
  border-radius: 50%;
}

.slick-active .slider-dots__circle {
  border-color: black;
}

.slider-dots__circle-inner {
  width: 5px;
  height: 5px;
  background-color: black;
  border-radius: 50%;
}

.slider-dots__digit {
  padding-left: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" />

<div class="wrapper">
  <div class="slider">
    <div class="slide" data-number="1"><img src="http://placehold.it/350x50" /></div>
    <div class="slide" data-number="2"><img src="http://placehold.it/350x50" /></div>
    <div class="slide" data-number="3"><img src="http://placehold.it/350x50" /></div>
  </div>

  <div class="slider-dots"></div>

</div>

$(document).ready(function() {
  var time = 2;
  var $slick, isPause, tick, percentTime = 0;

  $slick = $('.slider');
  $slick.slick({
    draggable: true,
    adaptiveHeight: false,
    dots: true,
    mobileFirst: true,
    pauseOnDotsHover: true
  });
  $slick.on({
    mouseenter: function() {
      isPause = true;
    },
    mouseleave: function() {
      isPause = false;
      startProgressbar();
    },
    mousedown: function() {
      $rbar.fadeOut('slow');
      percentTime = 0;
    },
    afterChange: function(event, slick, currentSlide, nextSlide) {
      $('.circle-tx').text(((currentSlide ? currentSlide : 0) + 1) + '/' + slick.slideCount);
    }
  });

  function startProgressbar() {
    clearTimeout(tick);
    isPause = false;
    tick = setInterval(interval, 20);
    $rbar.fadeIn('slow');
  }
  var $rbar = $('.circle-go');
  var rlen = 2 * Math.PI * $rbar.attr('r');

  function interval() {
    if (isPause === false) {
      percentTime += 1 / (time + 0.1);
      $rbar.css({
        strokeDasharray: rlen,
        strokeDashoffset: rlen * (1 - percentTime / 100)
      });
      if (percentTime >= 100) {
        $slick.slick('slickNext');
        percentTime = 0;
        startProgressbar();
      }
    }
  }
  startProgressbar();
});

.slider-wrapper {
  display: block;
  width: 250px;
  position: relative;
  margin: 0 auto;
}
.progress-round__wrap {
  width: 110px;
  height: 110px;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  text-align: center;
}

.circle-bg {
  fill: rgba(255, 255, 255, 0);
  stroke: rgba(0, 0, 0, 0.05);
  stroke-width: 10;
  stroke-linecap: butt;
}
.circle-go {
  fill: rgba(255, 255, 255, 0);
  stroke: rgba(90, 230, 240, 0.75);
  stroke-width: 8;
  stroke-linecap: round;
}
.circle-tx {
  fill: rgba(255, 255, 255, 0.6);
  stroke: rgba(0, 0, 0, 0.3);
  stroke-width: 1;
  font: bold 50px 'Arial';
  text-anchor: middle;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<div class="slider-wrapper" id="slick-1">
  <div class="slider">
    <div class="slide"><img src="//lorempixel.com/250/200" /></div>
    <div class="slide"><img src="//lorempixel.com/250/201" /></div>
    <div class="slide"><img src="//lorempixel.com/250/202" /></div>
    <div class="slide"><img src="//lorempixel.com/250/203" /></div>
  </div>
  <div class="progress-round__wrap">
    <svg class="progress" viewBox="0 0 110 110">
      <circle class="circle-bg" r="50" cx="55" cy="55"/>
      <circle class="circle-go" r="50" cx="55" cy="55"/>
      <text class="circle-tx" x="50%" y="70"> </text>
    </svg>
  </div>
</div>