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

242

19 октября 2018, 04:20

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

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

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

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

$slider.slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    speed: 400,
    nextArrow: '<div class="slider-arrow arrow-next"><img src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Green_Arrow_Right.svg" alt=""></div>', // Кастомная стрелка "далее"
    prevArrow: '<div class="slider-arrow arrow-prev"><img src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Green_Arrow_Right.svg" alt=""></div>', // Кастомная стрелка "назад"
  });  
});

Answer 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:'<svg class="slick-arrow slick-next" viewBox="0 0 40 40"><circle cx="20" cy="20" r="18" transform="rotate(-90,20,20)" /><path d="M18,10 l10,10 -10,10" /></svg>', 
  prevArrow:'<svg class="slick-arrow slick-prev" viewBox="0 0 40 40"><circle cx="20" cy="20" r="18" /><path d="M22,10 l-10,10 10,10" /></svg>', 
  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; 
   
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> 
<link href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.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 class="slide">5</div> 
</div> 
<div class="nav"></div>