Progress Bar made by three callbacks: afterInit
, afterMove
and startDragging
.
- $(document).ready(function() {
- var time = 7; // time in seconds
- var $progressBar,
- $bar,
- $elem,
- isPause,
- tick,
- percentTime;
- //Init the carousel
- $("#owl-demo").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();
- }
- //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;
- // })
- });
- <div id="owl-demo" class="owl-carousel owl-theme">
- <div class="item"><img src="assets/fullimage1.jpg" alt="The Last of us"></div>
- <div class="item"><img src="assets/fullimage2.jpg" alt="GTA V"></div>
- <div class="item"><img src="assets/fullimage3.jpg" alt="Mirror Edge"></div>
- </div>
- #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;
- }