Tutorial Progress Bar dengan JQuery Owl Carousel

By: QMPC Network on 23.20

Kali ini penulis akan sharing tutorial membuat slider progress bar menggunakan JQuery Owl Carousel. Tentu saja ini sudah responsive. Oke. langsung saja.

Berikut langkah-langkahnya:
Pertama downloadlah JQuery Owl Carousel
Panggil file css nya yang ada dalam folder owl carousel;

<link href="owl.carousel/owl-carousel/owl.carousel.css" rel="stylesheet" type="text/css"></link>
<link href="owl.carousel/owl-carousel/owl.theme.css" rel="stylesheet" type="text/css"></link>

Panggil file jquery-1.9.1.min.js dan owl.carousel.js yang ada dalam folder js, hasilnya seperti di bawah ini:

<script type="text/javascript" src="owl.carousel/assets/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="owl.carousel/owl-carousel/owl.carousel.js"></script>
<script>
$(document).ready(function() {
var time = 2; // time in seconds
var $progressBar,
     $bar,
     $elem,
     isPause,
     tick,
     percentTime;
   //Init the carousel
   $("#myslider").owlCarousel({
     slideSpeed : 500,
     paginationSpeed : 500,
     singleItem : true,
     afterInit : progressBar,
     afterMove : moved,
     startDragging : pauseOnDragging
   });
   //Init progressBar where elem is $("#owl-demo")
   function progressBar(elem){
     $elem = elem;
     //build progress bar elements
     buildProgressBar();
     //start counting
     start();
   }
 
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;
   // })
});
</script>

Buatlah markup HTML seperti di bawah ini:

<div id="owl-demo" class="owl-carousel owl-theme">

<div class="item"><img src="owl.carousel/demos/assets/fullimage1.jpg" alt="The Last of us"></div>


<div class="item"><img src="owl.carousel/demos/assets/fullimage2.jpg" alt="GTA V"></div>
<div class="item"><img src="owl.carousel/demos/assets/fullimage3.jpg" alt="Mirror Edge"></div>
</div>
 
Terakhir tambahkan style berikut:
<style>
#owl-demo .item img{
display: block;
width: 100%;
height: auto;
}
#bar{
width: 0%;
max-width: 100%;
height: 4px;
background: #7fc242;
}
#progressBar{
width: 100%;
background: #EDEDED;
}
</style>

Berikut hasilnya: