Owl Carousel with progress and navigation icons

index.html

<div class="slider">
  <div class="container-fluid no-padding no-margin">
    <div class="row">
      <div class="col-md-12">
          <div id="slider-items" class="owl-carousel owl-theme">
            <div class="item">
              <img src="img/fullimage1.jpg" alt="The Last of us">
              <p class="caption">Beautiful Bangladesh</p>
            </div>
            <div class="item">
              <img src="img/fullimage2.jpg" alt="The Last of us">
              <p class="caption">Beautiful Bangladesh</p>
            </div>
            <div class="item">
              <img src="img/fullimage3.jpg" alt="The Last of us">
              <p class="caption">Beautiful Bangladesh</p>
            </div>

          </div>
      </div>
    </div>
  </div>
</div>

main.js

$(document).ready(function() {
 
  var time = 7; // time in seconds
 
  var $progressBar,
      $bar, 
      $elem, 
      isPause, 
      tick,
      percentTime;
 
    //Init the carousel
    $("#slider-items").owlCarousel({
      slideSpeed : 500,
      paginationSpeed : 500,
      singleItem : true,
      afterInit : progressBar,
      afterMove : moved,
      navigation: true,
		navigationText: [
	      "<i class='fa fa-angle-left'></i>",
	      "<i class='fa fa-angle-right'></i>"
	      ],
      startDragging : 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;
    // })
 
});

style.css

#slider-items .item img{
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}
#slider-items .item{position: relative;}
.slider p.caption {
    position: absolute;
    top: 10%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    font-size: 40px;
    text-transform: uppercase;
}
#bar{
  width: 0%;
  max-width: 100%;
  height: 4px;
  background: #7fc242;
}
#progressBar{
  width: 100%;
  background: #EDEDED;
}
.owl-theme .owl-controls .owl-buttons div {
  position: absolute;
}
.owl-theme .owl-controls .owl-buttons .owl-prev{
  left: 45px;
  top: 45%;
}
.owl-theme .owl-controls .owl-buttons .owl-next{
  right: 45px;
  top: 45%;
}
.owl-prev i, .owl-next i {
  padding: 6px 14px;
  color: #7fc242;
  font-size: 25px;
  border-radius: 57px;
  border: 2px solid #7fc242;
}
.owl-prev i:hover, .owl-next i:hover{
  color: #000;
}