如何为Owl Carousel 2创建进度条?

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 1进度条的官方旧链接甚至不再有效了，但是我已经找到了工作示例，但是对于Owl 1也是如此。

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

我尝试过使用代码，但是无法将其设置为与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;
}

2 个解决方案

#1

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'.

回调函数没有被触发，因为您正在对owlCarousel 2中不存在的事件调用它们。活动以“on”为前缀。

So if you call them like this:

如果你这样称呼他们:

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

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

函数将被调用。在这里查看owlCarousel事件文档。

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

检查这个代码页，找到一个使用CSS转换的OwlCarousel中的progressbar示例。

#2

After running into the need for a progress bar I stumbled across this question, as well as the example of a progress bar with owl-carousel v1.

在遇到需要一个进度条之后，我偶然发现了这个问题，以及一个带有owl-carousel v1的进度条示例。

Using v2.3.3 I came up with the following js/css-animation based solution:

使用v2.3.3，我提出了以下基于js/css-animation的解决方案:

javascript:

javascript:

const $slider = $('.my-slider')
const SLIDER_TIMEOUT = 10000

$slider.owlCarousel({
  items: 1,
  nav: false,
  dots: false,
  autoplay: true,
  autoplayTimeout: SLIDER_TIMEOUT,
  autoplayHoverPause: true,
  loop: true,
  onInitialized: ({target}) => {
    const animationStyle = `-webkit-animation-duration:${SLIDER_TIMEOUT}ms;animation-duration:${SLIDER_TIMEOUT}ms`
    const progressBar = $(
      `<div class="slider-progress-bar"><span class="progress" style="${animationStyle}"></span></div>`
    )
    $(target).append(progressBar)
  },
  onChanged: ({type, target}) => {
    if (type === 'changed') {
      const $progressBar = $(target).find('.slider-progress-bar')
      const clonedProgressBar = $progressBar.clone(true)

      $progressBar.remove()
      $(target).append(clonedProgressBar)
    }
  }
})

scss

scss

.slider-progress-bar {
  /* your progress bar styles here */

  .progress {
    height: 4px;
    background: red;
    animation: sliderProgressBar ease;
  }
}

.my-slider:hover {
  .slider-progress-bar .progress {
    animation-play-state: paused;
  }
}

@keyframes sliderProgressBar {
  0% {
    width: 0%;
  }

  100% {
    width: 100%;
  }
}