如何为 Owl Carousel 2 创建进度条？答案

【问题标题】：How to create progress bar for Owl Carousel 2?如何为 Owl Carousel 2 创建进度条？
【发布时间】：2017-01-05 09:14:08
【问题描述】：

Owl 1 进度条的官方旧版 link 甚至不再工作，但我发现 example 和 Owl 1 也可以工作。

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

【问题讨论】：

仅供参考，我试图找出导致我的一个网站页面上的 CPU 使用率等原因，结果发现progressBar 是罪魁祸首。

标签： javascript jquery html css owl-carousel-2

【解决方案1】：

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

所以如果你这样称呼他们：

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

函数将被调用。查看 owlCarousel 事件文档here。

查看this CodePen，了解使用 CSS 过渡的 OwlCarousel 中的示例进度条。

【讨论】：

您在 CodePen 中的示例对我很有帮助！

【解决方案2】：

在遇到需要进度条后，我偶然发现了这个问题，以及带有 owl-carousel v1 的 example of a progress bar。

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

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

.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%;
  }
}

【讨论】：