CODEWITHSUNDEEP
javascriptjquerycssowl-carousel-2
kores59
kores59

Reputation: 443

OwlCarousel2 animated dots onChange

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)

Upvotes: 3

Views: 2372

Answers (1)

Ewomazino Ukah
Ewomazino Ukah

Reputation: 2366

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 :)

Upvotes: 2

Related Questions