Owl Carousel 2 bug report

by bizamajig

HTML

<script src="http://owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js"></script>
<link rel="stylesheet" href="http://owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css">
<div id="owl-demo" class="owl-carousel">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
    <div class="item"><h4>7</h4></div>
    <div class="item"><h4>8</h4></div>
    <div class="item"><h4>9</h4></div>
    <div class="item"><h4>10</h4></div>
    <div class="item"><h4>11</h4></div>
    <div class="item"><h4>12</h4></div>
</div>

CSS

.owl-carousel .item {
    height: 200px;
    background: #4DC7A0;
    padding: 1rem;
}

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

#progressBar {
  width: 100%;
  background: #EDEDED;
}

JavaScript

var time = 7; // time in seconds
 
var $progressBar,
    $bar, 
    $elem, 
    isPause, 
    tick,
    percentTime;

// Init the carousel
$('#owl-demo').owlCarousel({
    loop: true,
    margin: 10,
    nav: true,
    items: 1,
    onInitialized: progressBar,
    onTranslated: moved,
    onDrag: pauseOnDragging
});

// Init progressBar where elem is $("#owl-demo")
function progressBar(){    
    // 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($("#owl-demo"));
}

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 
            $("#owl-demo").trigger("next.owl.carousel"); // this doesn't work
        }
    }
}

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

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