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:
Tidak ada komentar:
Posting Komentar