Как сделать заполнение border кнопки slick слайдера при клике?

#javascript #html #jquery #css #slickjs

При каждом клике бордер кнопки должен постепенно заполняться т.е когда будет достигнут
последний слайд, у кнопки будет полный бордер вокруг.  

В общем виде это выглядит так,- по нажатию на кнопку "назад" у кнопки "вперед" обводка
будет уменьшаться т.е кнопка "вперед" выступает в роли progress bar



Есть пример на codepen:

https://codepen.io/st-iv/pen/JBmvWO
наверное можно взять за основу прогресс бар ниже, но пока что-то не получается.
И сложность ещё в том, как верстать этот неполный border вокруг элемента

$slider.slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    speed: 400,
    nextArrow: '
', // Кастомная стрелка "далее"
    prevArrow: '
', // Кастомная стрелка "назад"
  });  
});

    

Ответы

Ответ 1

$('.slider').on('init reInit afterChange',function(event,slick,currentSlide){
  //Рассчитываем длину окружности в кнопке по школьной формуле (с=2πr)
  var circleLength = $('.slick-next circle').attr('r')*Math.PI*2;
  
  //Определяем индекс текущего слайда. При событиях "init" и "reInit" параметр "currentSlide"
не определён, в этом случае currentSlide приравниваем к нулю. Также добавляем единицу,
т.к. отсчёт слайдов начинается с нуля. 
  var i =  (currentSlide ? currentSlide : 0) + 1;
  
  //Определяем долю заполнения, разделив индекс текущего слайда на общее количество
слайдов
  var part = i/slick.slideCount;
  
  //Задаём кругу внутри кнопки свойство "stroke-dasharray". Первый параметр - длина
видимой части границы, второй - длина пустого промежутка.
  $('.slick-next circle').css('stroke-dasharray', circleLength*part+','+circleLength);
});

$('.slider').slick({
  dots:false,
  arrows:true,
  nextArrow:'',
  prevArrow:'',
  appendArrows:$('.nav')
});
*{
  box-sizing:border-box;
}
body{
  background-color:#cda;
}
.slide{
  height:100px;
  background-color:gray;
  color:#fff;
  line-height:100px;
  text-align:center;
  font-weight:bold;
  font-size:75px;
}
.slick-arrow{
  display:inline-block;
  width:40px;
  height:40px;
  cursor:pointer;
}
.slick-arrow circle{
  fill:#fff;
  stroke:green;
  stroke-width:2;
  stroke-dasharray:0,1000px;
  transition: all .2s linear;
}
.slick-arrow path{
  stroke-width:2;
  fill:none;
  stroke:black;
  stroke-linecap:round;
  
}




  
1
  
2
  
3
  
4
  
5