How to create progress bar for Owl Carousel 2?

Question

Official older link for Owl 1 progress bar doesn't even work anymore but I have found working example but also for Owl 1.

I have tried to use the code but I am not able to set it to work with Owl 2 http://codepen.io/anon/pen/GrgEaG

$(document).ready(function() {

  var time = 7; // time in seconds

  var $progressBar,
      $bar, 
      $elem, 
      isPause, 
      tick,
      percentTime;

    //Init the carousel
    $("#owl-demo").owlCarousel({
      items: 1,
      initialized : progressBar,
      translate : moved,
      drag : pauseOnDragging
    });

    //Init progressBar where elem is $("#owl-demo")
    function progressBar(elem){
      $elem = elem;
      //build progress bar elements
      buildProgressBar();
      //start counting
      start();
    }

    //create div#progressBar and div#bar then prepend to $("#owl-demo")
    function buildProgressBar(){
      $progressBar = $("<div>",{
        id:"progressBar"
      });
      $bar = $("<div>",{
        id:"bar"
      });
      $progressBar.append($bar).prependTo($elem);
    }

    function start() {
      //reset timer
      percentTime = 0;
      isPause = false;
      //run interval every 0.01 second
      tick = setInterval(interval, 10);
    };

    function interval() {
      if(isPause === false){
        percentTime += 1 / time;
        $bar.css({
           width: percentTime+"%"
         });
        //if percentTime is equal or greater than 100
        if(percentTime >= 100){
          //slide to next item 
          $elem.trigger('owl.next')
        }
      }
    }

    //pause while dragging 
    function pauseOnDragging(){
      isPause = true;
    }

    //moved callback
    function moved(){
      //clear interval
      clearTimeout(tick);
      //start again
      start();
    }

    //uncomment this to make pause on mouseover 
    // $elem.on('mouseover',function(){
    //   isPause = true;
    // })
    // $elem.on('mouseout',function(){
    //   isPause = false;
    // })

});

#bar{
  width: 0%;
  max-width: 100%;
  height: 4px;
  background: #7fc242;
}
#progressBar{
  width: 100%;
  background: #EDEDED;
}

Answer 1

the callback functions are not being fired because you're calling them on events that don't exist in owlCarousel 2. The events are prefixed with 'on'.

So if you call them like this:

$("#owl-demo").owlCarousel({
  items: 1,
  onInitialized : progressBar,
  onTranslate : moved,
  onDrag : pauseOnDragging
});

The functions will be called. Check the owlCarousel event docs here.

Check out this CodePen for an example progressbar in OwlCarousel using CSS transitions.

Answer 2

After running into the need for a progress bar I stumbled across this question, as well as the example of a progress bar with owl-carousel v1.

Using v2.3.3 I came up with the following js/css-animation based solution:

javascript:

const $slider = $('.my-slider')
const SLIDER_TIMEOUT = 10000

$slider.owlCarousel({
  items: 1,
  nav: false,
  dots: false,
  autoplay: true,
  autoplayTimeout: SLIDER_TIMEOUT,
  autoplayHoverPause: true,
  loop: true,
  onInitialized: ({target}) => {
    const animationStyle = `-webkit-animation-duration:${SLIDER_TIMEOUT}ms;animation-duration:${SLIDER_TIMEOUT}ms`
    const progressBar = $(
      `<div class="slider-progress-bar"><span class="progress" style="${animationStyle}"></span></div>`
    )
    $(target).append(progressBar)
  },
  onChanged: ({type, target}) => {
    if (type === 'changed') {
      const $progressBar = $(target).find('.slider-progress-bar')
      const clonedProgressBar = $progressBar.clone(true)

      $progressBar.remove()
      $(target).append(clonedProgressBar)
    }
  }
})

scss

.slider-progress-bar {
  /* your progress bar styles here */

  .progress {
    height: 4px;
    background: red;
    animation: sliderProgressBar ease;
  }
}

.my-slider:hover {
  .slider-progress-bar .progress {
    animation-play-state: paused;
  }
}

@keyframes sliderProgressBar {
  0% {
    width: 0%;
  }

  100% {
    width: 100%;
  }
}