Search code examples
javascriptjquerycssowl-carousel-2

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)


Solution

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