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

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

Есть пример на codepen:
https://codepen.io/st-iv/pen/JBmvWO наверное можно взять за основу прогресс бар ниже, но пока что-то не получается. И сложность ещё в том, как верстать этот неполный border вокруг элемента
$slider.slick({ slidesToShow: 3, slidesToScroll: 1, speed: 400, nextArrow: '

', // Кастомная стрелка "далее" prevArrow: '

', // Кастомная стрелка "назад" }); });

Ответ

$('.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