I need to show a user some questions in a loop, and while displaying a question there needs to be displayed a countdown timer like this one:
function progress(timeleft, timetotal, $element) {
var progressBarWidth = timeleft * $element.width() / timetotal;
$element.find('div').animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, 'linear');
if(timeleft > 0) {
setTimeout(function() {
progress(timeleft - 1, timetotal, $element);
}, 1000);
}
};
$('document').ready(function() {
$('#start').click(function() {
progress(5, 5, $('#progressBar'));
});
});
#progressBar {
width: 90%;
margin: 10px auto;
height: 22px;
background-color: #0A5F44;
}
#progressBar div {
height: 100%;
text-align: right;
padding: 0 10px;
line-height: 22px; /* same as #progressBar height if we want text middle aligned */
width: 100%;
background-color: #CBEA00;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<button id='start'>Start</button>
<div id="progressBar">
<div></div>
</div>
The problem is: If I activate the timer (press the start button in the fiddle) while it's already started and going down, it starts to do crazy things: going up and down.
I guess this has to do with the recursive nature of setTimeout().
How do I reinitialize the timer (progressBar function) each time anew?
You have to clear the timeout. Like this:
function progress(timeleft, timetotal, $element) {
var progressBarWidth = timeleft * $element.width() / timetotal;
$element.find('div').animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, 'linear');
if(timeleft > 0) {
if (window.timer) {
clearTimeout(window.timer)
}
window.timer = setTimeout(function() {
progress(timeleft - 1, timetotal, $element);
}, 1000);
}
};
$('document').ready(function() {
$('#start').click(function() {
progress(5, 5, $('#progressBar'));
});
});
#progressBar {
width: 90%;
margin: 10px auto;
height: 22px;
background-color: #0A5F44;
}
#progressBar div {
height: 100%;
text-align: right;
padding: 0 10px;
line-height: 22px; /* same as #progressBar height if we want text middle aligned */
width: 100%;
background-color: #CBEA00;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<button id='start'>Start</button>
<div id="progressBar">
<div></div>
</div>
Store the timeout in a variable and clear it when you want to start over.
var animating = null;
function progress(timeleft, timetotal, $element) {
var progressBarWidth = timeleft * $element.width() / timetotal;
$element.find('div').animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, 'linear');
if(timeleft > 0) {
clearTimeout(animating);
animating = setTimeout(function() {
progress(timeleft - 1, timetotal, $element);
}, 1000);
}
};
$('document').ready(function() {
$('#start').click(function() {
progress(5, 5, $('#progressBar'));
});
});
#progressBar {
width: 90%;
margin: 10px auto;
height: 22px;
background-color: #0A5F44;
}
#progressBar div {
height: 100%;
text-align: right;
padding: 0 10px;
line-height: 22px; /* same as #progressBar height if we want text middle aligned */
width: 100%;
background-color: #CBEA00;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<button id='start'>Start</button>
<div id="progressBar">
<div></div>
</div>
Related
How to make carousel (slider) stop when the mouse pointer has hovered over on the image in GSAP?
I made a huge try in many ways on the internet but nothing suit for my code.
// wrapping the code with onload to execute JS immediately
window.onload = function() {
//variables for slide animation time
var slideDelay = 1.2; //the slides flow in every 1.5 seconds
var slideDuration = 0.2;
var slides = document.querySelectorAll(".slide");
var prevButton = document.querySelector("#prevButton");
var nextButton = document.querySelector("#nextButton");
var numSlides = slides.length;
//infinite slide rotation
for (var i = 0; i < numSlides; i++) {
TweenLite.set(slides[i], {
xPercent: i * 100
});
}
// auto animation (the timer can be added to auto animate after a certain idle-time)
var wrap = wrapPartial(-100, (numSlides - 1) * 100);
var timer = TweenLite.delayedCall(3, autoPlay);
var animation = TweenMax.to(slides, 1, {
xPercent: "+=" + (numSlides * 100),
ease: Linear.easeNone,
paused: true,
repeat: -1,
modifiers: {
xPercent: wrap
}
});
var proxy = document.createElement("div");
TweenLite.set(proxy, { x: "+=0" });
var transform = proxy._gsTransform;
var slideAnimation = TweenLite.to({}, 0.1, {});
var slideWidth = 0;
var wrapWidth = 0;
resize();
window.addEventListener("resize", resize);
// navigation with buttons
prevButton.addEventListener("click", function() {
animateSlides(1);
});
nextButton.addEventListener("click", function() {
animateSlides(-1);
});
function animateSlides(direction) {
timer.restart(true);
slideAnimation.kill();
var x = snapX(transform.x + direction * slideWidth);
slideAnimation = TweenLite.to(proxy, slideDuration, {
x: x,
onUpdate: updateProgress
});
}
// auto-play function for auto animation
function autoPlay() {
animateSlides(-1);
}
function updateProgress() {
animation.progress(transform.x / wrapWidth);
}
function snapX(x) {
return Math.round(x / slideWidth) * slideWidth;
}
//calculating the necessary width for slide animation
function resize() {
var norm = (transform.x / wrapWidth) || 0;
slideWidth = slides[0].offsetWidth;
wrapWidth = slideWidth * numSlides;
TweenLite.set(proxy, {
x: norm * wrapWidth
});
animateSlides(0);
slideAnimation.progress(1);
}
//returns the difference between the passed function's max and min value
function wrapPartial(min, max) {
var diff = max - min;
return function(value) {
var v = value - min;
return ((diff + v % diff) % diff) + min;
}
}
}
* {
box-sizing: border-box;
}
/* the main wrapper box */
main {
display: flex;
position: relative;
flex-direction: column;
width: 300px;
height: 250px;
overflow: hidden;
border: 3px solid #000000;
}
/* the header and navigations */
.controls {
padding: 10px;
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
min-height: 60px;
border-bottom: 2px solid #000000;
}
.controls button {
width: 30px;
height: 30px;
border-radius: 50%;
border: none;
outline: none;
background-repeat: no-repeat;
background-size: 70%;
cursor: pointer;
background-color: #000;
background-position: center center;
}
.slides-container {
border-top: 2px solid ;
position: relative;
overflow: hidden;
display: flex;
flex: 1;
}
.slide {
position: absolute;
font-size: 90px;
font-weight: 700;
color: rgba(255,255,255,0.9);
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
}
.slides-inner {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Varshath Gupta Solution</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/plugins/ModifiersPlugin.min.js"></script>
<script type="text/javascript" src="./script.js">
</script>
</head>
<body>
<!-- Main wrapper div for the header and slider components. -->
<div class="wrapper">
<main>
<!-- the header that includes the navigation buttons and the logo -->
<div class="controls">
<button id="prevButton" style="background-image: url(https://drive.google.com/uc?export=view&id=1o6S3UjO-DQFLXAGShYeN4bQXoI0yuxP0);"></button>
<div class="logo"><img width="80" src="https://logos.textgiraffe.com/logos/logo-name/Cartoon-designstyle-cartoon-m.png"/></div>
<button id="nextButton" style="background-image: url( https://drive.google.com/uc?export=view&id=1aptD-5krbPTtFRjZk_b2O8Ikx2x0F2TC);"></button>
</div>
<!-- the slider -->
<div class="slides-container">
<div class="slides-inner">
</div>
</div>
</div>
<div class="slide" style="background-image: url( https://drive.google.com/uc?export=view&id=1ngTIZMgHFHTSQO9vinuB666ruA3l-Vgq)"></div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
I was trying to build a clean countdown timer with a progress bar, I came up with this code I am not sure what seems to be the problem. CSS is working great I am pretty sure something is wrong with the JavaScript code.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#progressBar {
width: 90%;
margin: 10px auto;
height: 22px;
background-color: #0A5F44;
}
#progressBar div {
height: 100%;
text-align: right;
padding: 0 10px;
line-height: 22px; /* same as #progressBar height if we want text middle aligned */
width: 0;
background-color: #CBEA00;
box-sizing: border-box;
}
/* Do not take in account */
html{padding-top:30px}a.solink{position:fixed;top:0;width:100%;text-align:center;background:#f3f5f6;color:#cfd6d9;border:1px solid #cfd6d9;line-height:30px;text-decoration:none;transition:all .3s;z-index:999}a.solink::first-letter{text-transform:capitalize}a.solink:hover{color:#428bca}
</style>
</head>
<body>
<script>
function progress(timeleft, timetotal, $element) {
var progressBarWidth = timeleft * $element.width() / timetotal;
$element.find('div').animate({ width: progressBarWidth }, 500).html(Math.floor(timeleft/60) + ":"+ timeleft%60);
if(timeleft > 0) {
setTimeout(function() {
progress(timeleft - 1, timetotal, $element);
}, 1000);
}
};
progress(600, 600, $('#progressBar'));
</script>
<script> src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="progressBar">
<div class="bar"></div>
</div>
</body>
</html>
You need to restructure your code. There are few errors found
1.Uncaught ReferenceError:
$ is not defined because link was added in between the tag it should be added with src attribute.
2.The $element argument is getting undefined because script is added before html and is unable to get the required data as it is called on page load so, I have moved it to bottom of the page.
function progress(timeleft, timetotal, $element) {
var progressBarWidth = timeleft * $element.width() / timetotal;
$element.find('div').animate({ width: progressBarWidth }, 500).html(Math.floor(timeleft/60) + ":"+ timeleft%60);
if(timeleft > 0) {
setTimeout(function() {
progress(timeleft - 1, timetotal, $element);
}, 1000);
}
};
progress(600, 600, $('#progressBar'));
#progressBar {
width: 90%;
margin: 10px auto;
height: 22px;
background-color: #0A5F44;
}
#progressBar div {
height: 100%;
text-align: right;
padding: 0 10px;
line-height: 22px; /* same as #progressBar height if we want text middle aligned */
width: 0;
background-color: #CBEA00;
box-sizing: border-box;
}
/* Do not take in account */
html{padding-top:30px}a.solink{position:fixed;top:0;width:100%;text-align:center;background:#f3f5f6;color:#cfd6d9;border:1px solid #cfd6d9;line-height:30px;text-decoration:none;transition:all .3s;z-index:999}a.solink::first-letter{text-transform:capitalize}a.solink:hover{color:#428bca}
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="progressBar">
<div class="bar"></div>
</div>
</body>
</html>
I was trying to build a clean countdown timer with a progress bar, I came up with this code I am not sure what seems to be the problem. I am pretty sure CSS is working all right and there has to be some problem with JavaScript.The countdown did not start instead I was left with just this barenter image description here
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<style>
#progressBar {
width: 90%;
margin: 10px auto;
height: 22px;
background-color: #0A5F44;
}
#progressBar div {
height: 100%;
text-align: right;
padding: 0 10px;
line-height: 22px;
/* same as #progressBar height if we want text middle aligned */
width: 0;
background-color: #CBEA00;
box-sizing: border-box;
}
/* Do not take in account */
html {
padding-top: 30px
}
a.solink {
position: fixed;
top: 0;
width: 100%;
text-align: center;
background: #f3f5f6;
color: #cfd6d9;
border: 1px solid #cfd6d9;
line-height: 30px;
text-decoration: none;
transition: all .3s;
z-index: 999
}
a.solink::first-letter {
text-transform: capitalize
}
a.solink:hover {
color: #428bca
}
</style>
</head>
<div id="progressBar">
<div class="bar"></div>
</div>
<body>
<script>
function progress(timeleft, timetotal, $element) {
var progressBarWidth = timeleft * $element.width() / timetotal;
$element.find('div').animate({
width: progressBarWidth
}, 500).html(Math.floor(timeleft / 60) + ":" + timeleft % 60);
if (timeleft > 0) {
setTimeout(function() {
progress(timeleft - 1, timetotal, $element);
}, 1000);
}
};
progress(600, 600, $('#progressBar'));
</script>
</body>
</html>
I Think You Have Error In Many Things Like You Have To Add Jquery cdn Before script ,Error in Script tag ,And Also You Have to add html elements before script tag
<!DOCTYPE html>
<html>
<head>
<style>
#progressBar {
width: 90%;
margin: 10px auto;
height: 22px;
background-color: #0A5F44;
}
#progressBar div {
height: 100%;
text-align: right;
padding: 0 10px;
line-height: 22px; /* same as #progressBar height if we want text middle aligned */
width: 0;
background-color: #CBEA00;
box-sizing: border-box;
}
/* Do not take in account */
html{padding-top:30px}a.solink{position:fixed;top:0;width:100%;text-align:center;background:#f3f5f6;color:#cfd6d9;border:1px solid #cfd6d9;line-height:30px;text-decoration:none;transition:all .3s;z-index:999}a.solink::first-letter{text-transform:capitalize}a.solink:hover{color:#428bca}
</style>
</head>
<body>
<div id="progressBar">
<div class="bar"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function progress(timeleft, timetotal, $element) {
var progressBarWidth = timeleft * $element.width() / timetotal;
$element.find('div').animate({ width: progressBarWidth }, 500).html(Math.floor(timeleft/60) + ":"+ timeleft%60);
if(timeleft > 0) {
setTimeout(function() {
progress(timeleft - 1, timetotal, $element);
}, 1000);
}
};
progress(6000, 6000, $('#progressBar'));
</script>
</body>
</html>
Try This It Work Fine For Me
I found different error, move the jquery import, and add the function on document ready.
<!DOCTYPE html>
<html>
<head>
<style>
#progressBar {
width: 90%;
margin: 10px auto;
height: 22px;
background-color: #0A5F44;
}
#progressBar div {
height: 100%;
text-align: right;
padding: 0 10px;
line-height: 22px; /* same as #progressBar height if we want text middle aligned */
width: 0;
background-color: #CBEA00;
box-sizing: border-box;
}
/* Do not take in account */
html{padding-top:30px}a.solink{position:fixed;top:0;width:100%;text-align:center;background:#f3f5f6;color:#cfd6d9;border:1px solid #cfd6d9;line-height:30px;text-decoration:none;transition:all .3s;z-index:999}a.solink::first-letter{text-transform:capitalize}a.solink:hover{color:#428bca}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<script>
function progress(timeleft, timetotal, $element) {
var progressBarWidth = timeleft * $element.width() / timetotal;
$element.find('div').animate({ width: progressBarWidth }, 500).html(Math.floor(timeleft/60) + ":"+ timeleft%60);
if(timeleft > 0) {
setTimeout(function() {
progress(timeleft - 1, timetotal, $element);
}, 1000);
}
};
$(function() {
progress(600, 600, $('#progressBar')); });
</script>
<div id="progressBar">
<div class="bar"></div>
</div>
</body>
</html>
I'm using a jQuery slideshow plugin but it doesn't have an option for autoplay. Currently, the only way to trigger the slides is by clicking the left and right arrows.
Anyone have any solutions? I did some research but couldn't find anyone who came up with a solution yet and the original developer doesn't appear to be coding anymore.
Below is the slider I'm using on codepen.
(function() {
var carouselContent, carouselIndex, carouselLength, firstClone, firstItem, isAnimating, itemWidth, lastClone, lastItem;
carouselContent = $(".carousel__content");
carouselIndex = 0;
carouselLength = carouselContent.children().length;
isAnimating = false;
itemWidth = 100 / carouselLength;
firstItem = $(carouselContent.children()[0]);
lastItem = $(carouselContent.children()[carouselLength - 1]);
firstClone = null;
lastClone = null;
carouselContent.css("width", carouselLength * 100 + "%");
carouselContent.transition({
x: (carouselIndex * -itemWidth) + "%"
}, 0);
$.each(carouselContent.children(), function() {
return $(this).css("width", itemWidth + "%");
});
$(".nav--left").on("click", function() {
if (isAnimating) {
return;
}
isAnimating = true;
carouselIndex--;
if (carouselIndex === -1) {
lastItem.prependTo(carouselContent);
carouselContent.transition({
x: ((carouselIndex + 2) * -itemWidth) + "%"
}, 0);
return carouselContent.transition({
x: ((carouselIndex + 1) * -itemWidth) + "%"
}, 1000, "easeInOutExpo", function() {
carouselIndex = carouselLength - 1;
lastItem.appendTo(carouselContent);
carouselContent.transition({
x: (carouselIndex * -itemWidth) + "%"
}, 0);
return isAnimating = false;
});
} else {
return carouselContent.transition({
x: (carouselIndex * -itemWidth) + "%"
}, 1000, "easeInOutExpo", function() {
return isAnimating = false;
});
}
});
$(".nav--right").on("click", function() {
if (isAnimating) {
return;
}
isAnimating = true;
carouselIndex++;
return carouselContent.transition({
x: (carouselIndex * -itemWidth) + "%"
}, 1000, "easeInOutExpo", function() {
isAnimating = false;
if (firstClone) {
carouselIndex = 0;
carouselContent.transition({
x: (carouselIndex * -itemWidth) + "%"
}, 0);
firstClone.remove();
firstClone = null;
carouselLength = carouselContent.children().length;
itemWidth = 100 / carouselLength;
carouselContent.css("width", carouselLength * 100 + "%");
$.each(carouselContent.children(), function() {
return $(this).css("width", itemWidth + "%");
});
return;
}
if (carouselIndex === carouselLength - 1) {
carouselLength++;
itemWidth = 100 / carouselLength;
firstClone = firstItem.clone();
firstClone.addClass("clone");
firstClone.appendTo(carouselContent);
carouselContent.css("width", carouselLength * 100 + "%");
$.each(carouselContent.children(), function() {
return $(this).css("width", itemWidth + "%");
});
return carouselContent.transition({
x: (carouselIndex * -itemWidth) + "%"
}, 0);
}
});
});
}).call(this);
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body, html {
font-family: "europa-1","europa-2", sans-serif;
overflow: hidden;
}
.wrapper {
max-width: 940px;
width: 100%;
position: relative;
overflow: hidden;
margin: 0 auto;
}
/**
* Use this wrapper only for demo purposes
* So you can show the items outside the wrapper
*/
.wrapper--demo {
overflow: visible;
}
.wrapper--demo:after, .wrapper--demo:before {
content: "";
position: absolute;
width: 800px;
height: 100%;
top: 0;
left: 100%;
background: rgba(255, 255, 255, 0.8);
z-index: 2;
}
.wrapper--demo:before {
left: -800px;
}
.carousel {
width: 100%;
position: relative;
}
.carousel .carousel__content {
width: auto;
position: relative;
overflow: hidden;
-webkit-backface-visibility: hidden;
-webkit-transition: translate3d(0, 0, 0);
}
.carousel .carousel__content .item {
display: block;
float: left;
width: 100%;
position: relative;
}
.carousel .carousel__content .item .title {
position: absolute;
top: 50%;
left: 0;
margin: -33px 0 0 0;
padding: 0;
font-size: 3rem;
width: 100%;
text-align: center;
letter-spacing: .3rem;
color: #FFF;
}
.carousel .carousel__content .item .title--sub {
margin-top: 20px;
font-size: 1.2em;
opacity: .5;
}
.carousel .carousel__content .item img {
width: 100%;
max-width: 100%;
display: block;
}
.carousel .carousel__nav {
position: absolute;
width: 100%;
top: 50%;
margin-top: -17px;
left: 0;
z-index: 1;
}
.carousel .carousel__nav .nav {
position: absolute;
top: 0;
color: #000;
background: #FFF;
padding: 8px 12px;
font-weight: bold;
text-decoration: none;
font-size: .8rem;
transition: padding .25s ease;
}
.carousel .carousel__nav .nav:hover {
padding: 8px 20px;
}
.carousel .carousel__nav .nav--left {
border-radius: 0px 3px 3px 0px;
}
.carousel .carousel__nav .nav--right {
right: 0;
border-radius: 3px 0px 0px 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.9/jquery.transit.min.js"></script>
<div class="wrapper wrapper--demo">
<div class="carousel">
<div class="carousel__content">
<div class="item">
<p class="title">First</p>
<img src="http://placehold.it/1800x850/70AD96/FFF&text= " alt="">
</div>
<div class="item">
<p class="title">Second</p>
<img src="http://placehold.it/1800x850/EA4E23/FFF&text= " alt="">
</div>
<div class="item">
<p class="title">Third</p>
<img src="http://placehold.it/1800x850/9BA452/FFF&text= " alt="">
</div>
<div class="item">
<p class="title">Fourth</p>
<img src="http://placehold.it/1800x850/472D38/FFF&text= " alt="">
</div>
<div class="item">
<p class="title">Fifth</p>
<img src="http://placehold.it/1800x850/F77C85/FFF&text= " alt="">
</div>
<div class="item">
<p class="title">Sixth</p>
<p class="title title--sub">Last Item</p>
<img src="http://placehold.it/1800x850/00FFAE/FFF&text= " alt="">
</div>
</div>
<div class="carousel__nav">
Previous
Next
</div>
</div>
</div>
Use jQuery .click() to mimic user click on the corresponding DOM element which is $(".nav--left").click() & $(".nav--right").click() in your case.
Use setInterval to achieve the desired "autplay effect".
This should do it quick and dirty; just append it to your existing script. Have fun with this working Forked PEN (there is also a link to an advanced one at the bottom).
JavaScript:
var autoSlide = function( sDirection ) {
sDirection === 'left' || sDirection = 'right';
$( '.nav--' + sDirection ).click(); // ".nav--left" or ".nav--right"
};
setInterval( function() {
autoSlide(); // with default direction: 'right'
// autoSlide( 'left' ) // slide left
}, 1000 ); // every 1000 milliseconds
CoffeeScript:
autoSlide = ( sDirection ) ->
sDirection == 'left' || sDirection = 'right'
$( ".nav--#{sDirection}" ).click()
setInterval(
-> autoSlide() # with default direction: 'right'
# autoSlide( 'left' ) # slide left
1000 # every second
)
I only posted whats new instead of repeating your answers snippet! If you have any questions about customization or general functionality feel free to leave a comment.
PEN with advanced control capabilities.
shortened version (reduced to the very essential):
setInterval(function() { $('.nav--right').click() }, 1000 );
or for the other direction and as half as slow:
setInterval(function() { $('.nav--left').click() }, 2000 );
So, I'm trying to copy apple.com style of carousel. I wanted to have timer pagination so so far I have this much done: jsfiddle
How can I replace pagination buttons with progress bars? Here is what I have so far:
$(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();
});
.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;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" rel="stylesheet"/>
<div class="slider-wrapper" id="slick-1">
<div class="slider">
<div class="slide">slider #1</div>
<div class="slide">slider #2</div>
<div class="slide">slider #3</div>
</div>
<div class="slider-progress">
<div class="progress"></div>
</div>
</div>
Just had to do this for my company yesterday.
It was a bit trickier because slick is implemented on our website with 2 transitions : swipe if we use the mouse, fade if we don't..
Anyway, I remembered your post when i was digging a bit yesterday so I made it simpler here.
$(".slider").slick({
infinite: true,
arrows: false,
dots: false,
autoplay: false,
speed: 800,
slidesToShow: 1,
slidesToScroll: 1,
});
//ticking machine
var percentTime;
var tick;
var time = 1;
var progressBarIndex = 0;
$('.progressBarContainer .progressBar').each(function(index) {
var progress = "<div class='inProgress inProgress" + index + "'></div>";
$(this).html(progress);
});
function startProgressbar() {
resetProgressbar();
percentTime = 0;
tick = setInterval(interval, 10);
}
function interval() {
if (($('.slider .slick-track div[data-slick-index="' + progressBarIndex + '"]').attr("aria-hidden")) === "true") {
progressBarIndex = $('.slider .slick-track div[aria-hidden="false"]').data("slickIndex");
startProgressbar();
} else {
percentTime += 1 / (time + 5);
$('.inProgress' + progressBarIndex).css({
width: percentTime + "%"
});
if (percentTime >= 100) {
$('.single-item').slick('slickNext');
progressBarIndex++;
if (progressBarIndex > 2) {
progressBarIndex = 0;
}
startProgressbar();
}
}
}
function resetProgressbar() {
$('.inProgress').css({
width: 0 + '%'
});
clearInterval(tick);
}
startProgressbar();
// End ticking machine
$('.progressBarContainer div').click(function () {
clearInterval(tick);
var goToThisIndex = $(this).find("span").data("slickIndex");
$('.single-item').slick('slickGoTo', goToThisIndex, false);
startProgressbar();
});
h3 {
margin:5px 0;
}
.sliderContainer {
position: relative;
}
.slider {
width: 500px;
margin: 30px 50px 50px;
}
.slick-slide {
background: #3a8999;
color: white;
padding: 80px 0 120px;
font-size: 30px;
font-family: "Arial", "Helvetica";
text-align: center;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
.slick-dots {
bottom: -30px;
}
.slick-slide:nth-child(odd) {
background: #e84a69;
}
.progressBarContainer {
position: absolute;
bottom: 20px;
width:300px;
left:150px;
}
.progressBarContainer div {
display: block;
width: 30%;
padding: 0;
cursor: pointer;
margin-right: 5%;
float: left;
color: white;
}
.progressBarContainer div:last-child {
margin-right: 0;
}
.progressBarContainer div span.progressBar {
width: 100%;
height: 4px;
background-color: rgba(255, 255, 255, 0.4);
display: block;
}
.progressBarContainer div span.progressBar .inProgress {
background-color: rgba(255, 255, 255, 1);
width: 0%;
height: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script>
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css" rel="stylesheet"/>
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet"/>
<div class="sliderContainer">
<div class="slider single-item">
<div>Slide1</div>
<div>Slide2</div>
<div>Slide3</div>
</div>
<div class="progressBarContainer">
<div>
<h3>Slide 1</h3>
<span data-slick-index="0" class="progressBar"></span>
</div>
<div>
<h3>Slide 2</h3>
<span data-slick-index="1" class="progressBar"></span>
</div>
<div>
<h3>Slide 3</h3>
<span data-slick-index="2" class="progressBar"></span>
</div>
</div>
</div>
[codepen][1]
Regards,
I am not entirely entirely familiar with these, but it seems you have been able to get the progressbar running, so it should not be that hard to turn the pagination buttons to progressbars.
What might help is that each of them has an element id (first is "slick-slide00") and the active one has a class "slick-active".
So if you want a hacky solution it might be enough to retrieve "slick-active" element every time the the slide changes (there should be listenable event for that) and turn the element with "slick-active" class into a progress bar.
For a "cleaner" solution you might need to dig into framework itself as the feature doesn't seem to be supported as of now.