I have installed the Slick carousel on my site along with some code I found for a nice looking progress bar. However, although the progress bar resets when the 'previous' and 'next' buttons are clicked, it doesn't reset when the slider is dragged.
I have played around with the jQuery events, but can't find one suitable for click & drag.
My site is http://bp112.betapark.co.uk/ and here is the jQuery Code:
<script>
$(document).ready(function() {
var time = 2;
var $bar,
$slick,
isPause,
tick,
percentTime;
$slick = $('.slider');
$slick.slick({
draggable: false,
arrows: true,
speed: 1200,
adaptiveHeight: false
});
$bar = $('.slider-progress .progress');
function startProgressbar() {
resetProgressbar();
percentTime = 0;
isPause = false;
tick = setInterval(interval, 30);
}
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();
$('.slick-next, .slick-prev').click(function() {
startProgressbar();
});
});
</script>
You could use slick events. For exemple beforeChange
or afterChange
and put there your action, not on click: http://kenwheeler.github.io/slick/
$slick.on('beforeChange', function(event, slick, currentSlide, nextSlide){
startProgressbar();
});
$(document).on('ready', function() {
var time = 2;
var $bar,
$slick,
isPause,
tick,
percentTime;
$slick = $('.regular');
$slick.slick({
draggable: true,
arrows: true,
speed: 1200,
adaptiveHeight: false
});
$bar = $('.slider-progress .progress');
function startProgressbar() {
resetProgressbar();
percentTime = 0;
isPause = false;
tick = setInterval(interval, 30);
}
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();
$slick.on('beforeChange', function(event, slick, currentSlide, nextSlide){
startProgressbar();
});
});
.slider-progress {
width: 100%;
height: 10px;
background: rgba(255, 255, 255, 0.5);
position: absolute;
bottom: 0;
}
.slider-progress .progress {
width: 0%;
height: 10px;
background: #E74C3C;
}
/* SLICK BASE CSS */
.slick-prev {
background: #DDD;
border: none;
border-radius: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
padding: 0.25em 0.5em;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
z-index: 40;
content:"prev";
}
.slick-next {
background: #DDD;
border: none;
border-radius: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
padding: 0.25em 0.5em;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
z-index: 40;
}
html, body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.slider {
width: 50%;
margin: 100px auto;
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
.slick-slide {
transition: all ease-in-out .3s;
opacity: .2;
}
.slick-active {
opacity: .5;
}
.slick-current {
opacity: 1;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<section class="regular slider">
<div>
<img src="http://placehold.it/350x300?text=1">
</div>
<div>
<img src="http://placehold.it/350x300?text=2">
</div>
<div>
<img src="http://placehold.it/350x300?text=3">
</div>
<div>
<img src="http://placehold.it/350x300?text=4">
</div>
<div>
<img src="http://placehold.it/350x300?text=5">
</div>
<div>
<img src="http://placehold.it/350x300?text=6">
</div>
</section>
<div class="slider-progress"> <div class="progress"></div> </div>
EDIT 1
To stop on rollover use pauseOnHover: true
on slick slider (the documentation rules: http://kenwheeler.github.io/slick/! ;) ) and work on very useful variable isPause
to stop your bar:
$slick.on("mouseenter", function(){
isPause = true;
}).on("mouseleave", function(){
isPause = false;
})
$(document).on('ready', function() {
var time = 2;
var $bar,
$slick,
isPause,
tick,
percentTime;
$slick = $('.regular');
$slick.slick({
draggable: true,
arrows: true,
speed: 1200,
adaptiveHeight: false,
pauseOnHover: true /* add this option */
});
$bar = $('.slider-progress .progress');
function startProgressbar() {
resetProgressbar();
percentTime = 0;
isPause = false;
tick = setInterval(interval, 30);
}
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();
$slick.on('beforeChange', function(event, slick, currentSlide, nextSlide){
startProgressbar();
});
$slick.on("mouseenter", function(){
isPause = true;
}).on("mouseleave", function(){
isPause = false;
})
});
.slider-progress {
width: 100%;
height: 10px;
background: rgba(255, 255, 255, 0.5);
position: absolute;
bottom: 0;
}
.slider-progress .progress {
width: 0%;
height: 10px;
background: #E74C3C;
}
/* SLICK BASE CSS */
.slick-prev {
background: #DDD;
border: none;
border-radius: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
padding: 0.25em 0.5em;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
z-index: 40;
content:"prev";
}
.slick-next {
background: #DDD;
border: none;
border-radius: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
padding: 0.25em 0.5em;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
z-index: 40;
}
html, body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.slider {
width: 50%;
margin: 100px auto;
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
.slick-slide {
transition: all ease-in-out .3s;
opacity: .2;
}
.slick-active {
opacity: .5;
}
.slick-current {
opacity: 1;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<section class="regular slider">
<div>
<img src="http://placehold.it/350x300?text=1">
</div>
<div>
<img src="http://placehold.it/350x300?text=2">
</div>
<div>
<img src="http://placehold.it/350x300?text=3">
</div>
<div>
<img src="http://placehold.it/350x300?text=4">
</div>
<div>
<img src="http://placehold.it/350x300?text=5">
</div>
<div>
<img src="http://placehold.it/350x300?text=6">
</div>
</section>
<div class="slider-progress"> <div class="progress"></div> </div>