.slider-wrapper {
width: 600px;
}
.slider {
width: 600px;
height: 400px;
border: 1px solid #000;
}
.slide {
width: 100%;
height: 398px;
background: #ccc;
}
#slick-1 .slick-dots li {
width: 40px;
height: 5px;
background: #ccc;
}
#slick-1 .slick-dots li button {
width: 40px;
height: 5px;
}
#slick-1 .slick-dots li.slick-active,
#slick-1 .slick-dots li:hover {
background: #777;
}
#slick-1 .slick-dots li button,
#slick-1 .slick-dots li button:before {
color: transparent;
opacity: 0;
}
/* progress bar */
.slider-progress {
width: 100%;
height: 3px;
background: #eee;
}
.slider-progress .progress {
width: 0%;
height: 3px;
background: #000;
}
$(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();
});