slick slider с круговым индикатором

Question

Помогите решить такую проблему. Реализовал slick slider с круговой индикацией. Однако сейчас он работает не так как нужно. А именно: Сейчас круговая индикация поделена на 4 четверти, соответственно кол-ву слайдов.

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

код:

$('.slider').slick({
  fade: true,
  dots: false,
  arrows: true,
  autoplay: true
});

$('.slider').on('afterChange', function(event, slick, currentSlide) {
  var circleLength = $('.progress-line circle').attr('r') * Math.PI * 2;
  var i = (currentSlide ? currentSlide : 0) + 1;
  var part = i / slick.slideCount;
  $('.progress-line circle').css('stroke-dasharray', circleLength * part + ',' + circleLength);
});

.slider {
  width: 500px;
}

.slide {
  width: 100%;
  height: 100px;
  background: gray;
  color: #fff;
  text-align: center;
  font-size: 75px;
}

.slick-list .slick-track {
  height: 100%;
}

.circle {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 7.2vw;
  height: 7.2vw;
  fill: transparent;
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 1;
  transition: all .2s linear;
}

.progress-line {
  width: 100px;
  height: 100px;
}

.progress-line circle {
  fill: transparent;
  stroke: blue;
  stroke-width: 1;
  stroke-dasharray: 28.2743, 113.097;
  transition: all 1s linear;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet" />


<div class="slider">
  <div class="slide">1</div>
  <div class="slide">2</div>
  <div class="slide">3</div>
  <div class="slide">4</div>
</div>
<div class="nav">
  <svg class="progress-line" viewBox="0 0 40 40">
    <circle cx="20" cy="20" r="18" transform="rotate(-90,20,20)"  />   
  </svg>
  <svg class="circle" viewBox="0 0 40 40">
    <circle cx="20" cy="20" r="18" transform="rotate(-90,20,20)"  />   
  </svg>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

БЛОГ НА HUSL

slick slider с круговым индикатором

Ответы (0 шт):