如何为Owl Carousel 2创建进度栏? [英] How to create progress bar for Owl Carousel 2?

问题描述

Owl 1进度条的官方旧版链接但我发现示例也适用于猫头鹰1.

Official older link for Owl 1 progress bar doesn't even work anymore but I have found working example but also for Owl 1.

我尝试使用该代码，但无法将其设置为与Owl 2配合使用 http://codepen.io/anon/pen/GrgEaG

I have tried to use the code but I am not able to set it to work with Owl 2 http://codepen.io/anon/pen/GrgEaG

$(document).ready(function() {

  var time = 7; // time in seconds

  var $progressBar,
      $bar, 
      $elem, 
      isPause, 
      tick,
      percentTime;

    //Init the carousel
    $("#owl-demo").owlCarousel({
      items: 1,
      initialized : progressBar,
      translate : moved,
      drag : 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;
    // })

});

#bar{
  width: 0%;
  max-width: 100%;
  height: 4px;
  background: #7fc242;
}
#progressBar{
  width: 100%;
  background: #EDEDED;
}

推荐答案

未触发回调函数，因为您是在owlCarousel 2中不存在的事件上调用它们的.这些事件的前缀为'on'.

the callback functions are not being fired because you're calling them on events that don't exist in owlCarousel 2. The events are prefixed with 'on'.

因此，如果您这样称呼他们:

So if you call them like this:

$("#owl-demo").owlCarousel({
  items: 1,
  onInitialized : progressBar,
  onTranslate : moved,
  onDrag : pauseOnDragging
});

该函数将被调用.在此处中查看owlCarousel事件文档.

The functions will be called. Check the owlCarousel event docs here.

查看此CodePen ，以了解使用CSS过渡的OwlCarousel中的示例进度栏.

Check out this CodePen for an example progressbar in OwlCarousel using CSS transitions.

这篇关于如何为Owl Carousel 2创建进度栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！