Как сделать progress bar
для slick slider
отображающий прогресс количества страниц?
Т.е. не прогресс отображения текущего слайда, а прогресс скролла на масштабе всего слайдера.
$(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');
$barRound = $('.progress');
$('.slider-wrapper').on({
mouseenter: function() {
isPause = true;
},
mouseleave: function() {
isPause = false;
}
})
function startProgressbar() {
resetProgressbar();
percentTime = 0;
isPause = false;
tick = setInterval(interval, 10);
}
var $rbar = $('.progress circle');
var rlen = 2 * Math.PI * $rbar.attr('r');
function interval() {
percentTime += 1 / (time + 0.1);
$bar.css({
width: percentTime + '%'
});
$rbar.css({
'stroke-dasharray': rlen,
'stroke-dashoffset': rlen * (1 - percentTime / 100)
});
if (percentTime >= 100) {
$slick.slick('slickNext');
startProgressbar();
}
}
function resetProgressbar() {
$bar.css({
width: 0+'%'
});
clearTimeout(tick);
}
startProgressbar();
});
// circle bar
.progress circle {
fill: #ccc;
stroke: #00d6d6;
stroke-width: 10;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<div class="slider-wrapper" id="slick-1">
<div class="slider">
<div class="slide">your content</div>
<div class="slide">your content</div>
<div class="slide">your content</div>
</div>
<div class="slider-progress">
<div class="progress"></div>
</div>
<div class="progress-round__wrap">
<svg class="progress">
<circle r="50" cx="150" cy="80"/>
</svg>
</div>
</div>