Progress Bar

Setup

Progress Bar made by three callbacks: afterInit, afterMove and startDragging.

  1. $(document).ready(function() {
  2.  
  3. var time = 7; // time in seconds
  4.  
  5. var $progressBar,
  6. $bar,
  7. $elem,
  8. isPause,
  9. tick,
  10. percentTime;
  11.  
  12. //Init the carousel
  13. $("#owl-demo").owlCarousel({
  14. slideSpeed : 500,
  15. paginationSpeed : 500,
  16. singleItem : true,
  17. afterInit : progressBar,
  18. afterMove : moved,
  19. startDragging : pauseOnDragging
  20. });
  21.  
  22. //Init progressBar where elem is $("#owl-demo")
  23. function progressBar(elem){
  24. $elem = elem;
  25. //build progress bar elements
  26. buildProgressBar();
  27. //start counting
  28. start();
  29. }
  30.  
  31. //create div#progressBar and div#bar then prepend to $("#owl-demo")
  32. function buildProgressBar(){
  33. $progressBar = $("<div>",{
  34. id:"progressBar"
  35. });
  36. $bar = $("<div>",{
  37. id:"bar"
  38. });
  39. $progressBar.append($bar).prependTo($elem);
  40. }
  41.  
  42. function start() {
  43. //reset timer
  44. percentTime = 0;
  45. isPause = false;
  46. //run interval every 0.01 second
  47. tick = setInterval(interval, 10);
  48. };
  49.  
  50. function interval() {
  51. if(isPause === false){
  52. percentTime += 1 / time;
  53. $bar.css({
  54. width: percentTime+"%"
  55. });
  56. //if percentTime is equal or greater than 100
  57. if(percentTime >= 100){
  58. //slide to next item
  59. $elem.trigger('owl.next')
  60. }
  61. }
  62. }
  63.  
  64. //pause while dragging
  65. function pauseOnDragging(){
  66. isPause = true;
  67. }
  68.  
  69. //moved callback
  70. function moved(){
  71. //clear interval
  72. clearTimeout(tick);
  73. //start again
  74. start();
  75. }
  76.  
  77. //uncomment this to make pause on mouseover
  78. // $elem.on('mouseover',function(){
  79. // isPause = true;
  80. // })
  81. // $elem.on('mouseout',function(){
  82. // isPause = false;
  83. // })
  84.  
  85. });
  1. <div id="owl-demo" class="owl-carousel owl-theme">
  2.  
  3. <div class="item"><img src="assets/fullimage1.jpg" alt="The Last of us"></div>
  4. <div class="item"><img src="assets/fullimage2.jpg" alt="GTA V"></div>
  5. <div class="item"><img src="assets/fullimage3.jpg" alt="Mirror Edge"></div>
  6.  
  7. </div>
  1. #owl-demo .item img{
  2. display: block;
  3. width: 100%;
  4. height: auto;
  5. }
  6. #bar{
  7. width: 0%;
  8. max-width: 100%;
  9. height: 4px;
  10. background: #7fc242;
  11. }
  12. #progressBar{
  13. width: 100%;
  14. background: #EDEDED;
  15. }

More Demos