I would like to make dots in owl-carousel animated like progress bar for each item of carousel, I am using simple jQuery function for animated, which is called onChange event. But problem is, that function is called before HTML structure is changed.
CSS for dots:
.owl-theme .owl-dots .owl-dot{
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
width: 100px;
height: 5px;
margin-left: 2px;
margin-right: 2px;
background: #ccc;
border:none;
}
.owl-theme .owl-dots .owl-dot span {
margin: 0;
background: white;
width:0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
height: 5px;
}
.owl-theme .owl-dots .owl-dot.active span {
background: white;
width:0px;
}
JS
$(carousel).owlCarousel({
slideSpeed: 500,
paginationSpeed: 500,
singleItem: true,
navigation: true,
items: 1,
autoplay:false,
loop:true,
autoplayTimeout:2000,
onChange:navigationFill,
});
function navigationFill() {
var progressbar = $(".owl-theme .owl-dots .owl-dot.active span");
$(progressbar).animate({ width: "100%" }, 'slow');
}
This code works only when carousel is changed on next item, but animation is made for previous dot. Is there any way, how can I "pause" this JS, wait until HTML structure is changed and after that call this function?
JSFIDDLE https://jsfiddle.net/nxa36myc/29/ ( previous black "navigation dot" is changed to white when slide is changed)
I have created a fiddle based on your question here https://jsfiddle.net/mazinoukah/m45hx3v2/3/
Basically i added the 'owl-theme' class to the owl-carousel container.
Also, i removed the 'onChange' option and added a listener, 'changed.owl.carousel', to the owl instance.
HTML
<div class="wrapper">
<div class="owl-carousel owl-theme">
<div class="item"><img src="http://shrani.si/f/1W/4U/KrJheJj/tine.jpg"></div>
<div class="item"><img src="http://shrani.si/f/3A/q3/kC00r7/torbice.jpg"></div>
<div class="item padded"><img src="http://shrani.si/f/2o/hl/1xmizZhJ/medvedki.jpg"></div>
<div class="item padded"><img src="http://shrani.si/f/27/wV/4moHQxYk/maladva.jpg"></div>
</div>
<div id="nav"></div>
CSS
body {
background: #fff;
}
.owl-carousel .item {
background: #ccc;
text-align: center;
height: 450px;
}
.wrapper {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
.padded {
line-height: 450px;
}
#nav {
position: relative;
}
#nav > div {
font-size: 28px;
position: absolute;
top: -250px;
z-index: 2;
cursor: pointer;
padding: 0 5px;
visibility: hidden;
}
.wrapper:hover #nav > div {
visibility: visible;
}
.owl-prev {
left: 0;
}
.owl-next {
right: 0;
}
.owl-theme .owl-dots .owl-dot{
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
width: 100px;
height: 5px;
margin-left: 2px;
margin-right: 2px;
background: #ccc;
border:none;
}
.owl-theme .owl-dots .owl-dot span {
margin: 0;
background: white;
width:0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
height: 5px;
}
.owl-theme .owl-dots .owl-dot.active span {
background: white;
width:0px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}
JAVASCRIPT
var owl = $(".owl-carousel").owlCarousel({
slideSpeed: 500,
paginationSpeed: 500,
singleItem: true,
navigation: true,
items: 1,
autoplay:true,
loop:true,
autoplayTimeout:2000,
navText: [
'<i class="fa fa-angle-left"></i>',
'<i class="fa fa-angle-right"></i>'
],
responsive:{
0:{
items:1
},
767:{
items:1,
nav:true
}
}
});
owl.on('changed.owl.carousel', function(event) {
navigationFill();
})
function navigationFill() {
// Reset the width of all the 'dots'
var pr = $(".owl-theme .owl-dots .owl-dot span");
$(pr).css({ width: "0%" });
var progressbar = $(".owl-theme .owl-dots .owl-dot.active span");
$(progressbar).animate({ width: "100%" }, 'slow');
}
Let me know if you have any issues, or need further assistance. Hope it helps :)