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:
Read More
