скользящий ползунок круговой индикатор для стрелки

Question

У меня есть скользящий ползунок (или несколько ползунков) на странице.

Я добавляю стрелки для ползунка.

И я хочу, чтобы стрелки показывали индикатор выполнения слайда. Но только в соответствующем направлении.

Если ползунок перемещается вправо, то анимация - следующая кнопка со стрелкой. Кнопка со стрелкой prev должна оставаться заблокированной (slick-disabled).

Если ползунок достиг конца, активируется кнопка prev, и следующая кнопка становится недоступной (slick-disabled), и ползунок прокручивается в направлении, противоположном первому.

В то же время переключение между слайдами также должно работать.

Или следующая кнопка всегда активна и находится в процессе выполнения. И движение происходит только вправо. Когда мы дойдем до последнего слайда, снова снова первый и снова движение вправо.

Код:

var time = 2;
var $slick, isPause, tick, percentTime = 0;

if ($('.slider').length) {
  $('.slider').each(function() {
    var time = 2;
    var isPause, tick, percentTime = 0;

    $slick = $(this);
    var $status = $(this).closest('.section').find('.slider-num'),
      $current = $status.find('strong'),
      $length = $status.find('i');

    $slick.on('init reInit afterChange', function(event, slick, currentSlide, nextSlide) {

      var i = (currentSlide ? currentSlide : 0) + 1;
      $current.html((((i) < 10) ? "0" + (i) : i));
      $length.html('/' + (((slick.slideCount) < 10) ? "0" + (slick.slideCount) : slick.slideCount));
      //$status.html( '<strong>' + (((i)<10) ? "0"+(i) : i) +'</strong>'+ '<small>/' + (((slick.slideCount)<10) ? "0"+(slick.slideCount) : slick.slideCount)  + '</<small>');
    });

    $slick.slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      dots: false,
      infinite: false,
      touchMove: true,
      draggable: true,
      lazyLoad: 'ondemand',
      prevArrow: '<button class="slick-prev slick-disabled"><svg preserveAspectRatio="none" 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"/></svg></button>',
      nextArrow: '<button class="slick-next"><svg preserveAspectRatio="none" 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"/></svg></button>',
      autoplay: true,
      autoplaySpeed: 10000,
      // easing: 'swing',
    });


    $slick.on({
      mouseenter: function() {
        isPause = true;
      },
      mouseleave: function() {
        isPause = false;
        startProgressbar();
      },
      mousedown: function() {
        $rbar.fadeOut('slow');
        percentTime = 0;
      },
      afterChange: function(event, slick, currentSlide, nextSlide) {
        if (currentSlide === slick.slideCount - 1) {
          $slick.find('.slick-prev').removeClass('slick-disabled');
          $slick.find('.slick-next').addClass('slick-disabled');
        }
        console.log(currentSlide + '_' + slick.slideCount);
      }
    });
  });
}





function startProgressbar() {
  clearTimeout(tick);
  isPause = false;
  tick = setInterval(interval, 40);
  $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();
    }

    //console.log('S>>>' + percentTime);
  }

}

startProgressbar();

.circle-bg {
  fill: rgba(255, 255, 255, 0.5);
  stroke: #8C8C8C;
  stroke-width: 1;
  stroke-linecap: butt;
}

.circle-go {
  fill: rgba(255, 255, 255, 0);
  stroke: red;
  stroke-width: 5;
}

.slick-arrow {
  width: 56px;
  height: 56px;
  padding: 0;
  position: absolute;
  top: 50%;
  margin-top: -28px;
  background: transparent;
  border: none;
  display: block;
  z-index: 100;
  cursor: pointer;
}

.slick-arrow.slick-disabled .circle-bg {
  fill: rgba(255, 255, 255, 0);
}

.slick-arrow.slick-disabled .circle-go {
  opacity: 0;
}

.slick-arrow svg {
  width: 100%;
  height: 100%;
}

.slick-prev {
  left: 0;
}

.slick-next {
  right: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" integrity="sha256-UK1EiopXIL+KVhfbFa8xrmAWPeBjMVdvYMYkTAEv/HI=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" integrity="sha256-NXRS8qVcmZ3dOv3LziwznUHPegFhPZ1F/4inU7uC8h0=" crossorigin="anonymous"></script>


<div class="slider-wrapper" id="slick-1">
  <div class="slider">
    <div class="slide">
      <img src="https://images.unsplash.com/photo-1585071863849-9c95194bc0d8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" />
    </div>
    <div class="slide">
      <img src="https://images.unsplash.com/photo-1585071550721-fdb362ae2b8d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" />
    </div>
    <div class="slide">
      <img src="https://images.unsplash.com/photo-1585001971706-6a237712c0a7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" />
    </div>
    <div class="slide">
      <img src="https://images.unsplash.com/photo-1585068489440-879a7b089853?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" />
    </div>
  </div>

Вопрос: Как добавить анимацию прогресса в кнопки управления ползунком?