Пытаюсь реализовать таймер в виде окружности с бордером до следующего слайда. Вроде бы продумал, как это выстроить логически:
сделать svg окружность и заполнять обводку, примерно по такой формуле: (длина окружности) / (время до следующего слайда).
Очень нужен совет, как реализовать данную задачу. А именно интересует: каким параметром svg реализовать интервальную заливку окружности и на какое событие slick slider применить все эти действия, наверное on afterchange?
моя попытка сделать это, пытался ориентироваться на прогресс бар в виде линии https://codepen.io/st-iv/pen/KGKgmv?editors=1010
$(document).ready(function(){
var time = 2;
var $bar,
$slick,
isPause,
tick,
percentTime;
$slick = $('.slider');
$slick.slick({
draggable: true,
adaptiveHeight: false,
dots: true,
mobileFirst: true,
pauseOnDotsHover: true,
});
$bar = $('.slider-progress .progress');
$('.slider-wrapper').on({
mouseenter: function() {
isPause = true;
},
mouseleave: function() {
isPause = false;
}
})
function startProgressbar() {
resetProgressbar();
percentTime = 0;
isPause = false;
tick = setInterval(interval, 10);
}
function interval() {
if(isPause === false) {
percentTime += 1 / (time+0.1);
$bar.css({
width: percentTime+"%"
});
if(percentTime >= 100)
{
$slick.slick('slickNext');
startProgressbar();
}
}
}
function resetProgressbar() {
$bar.css({
width: 0+'%'
});
clearTimeout(tick);
}
startProgressbar();
});
// circle bar
//Рассчитываем длину окружности по формуле (с=2πr)
var circleLength = $('.progress-round__wrap circle').attr('r')*Math.PI*2;
// здесь нужно будет сопоставить длину окружности со временем до перелистывания на другой слайд
$('.progress-round__wrap circle').css('stroke-dasharray', circleLength*part+','+circleLength);
});
$(document).ready(function(){
var time = 2;
var $circlebar;
$circlebar = $('.progress-round__wrap circle');
function resetCirclebar() {
$circlebar.css({
width: 0+'%'
});
clearTimeout(tick);
}
})
и может быть попробовать совместить с данным решением https://codepen.io/st-iv/pen/jeOMVm?editors=1010
stroke-dasharray
,stroke-dashoffset
для заливки круга. Там в slick в настройках можно кастомный html кнопок задать, я бы прям туда кинул svg