Question

Owl 1进度条的官方年龄link不再有效，但我找到了工作example，但也为Owl 1工作。

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

NSBluetoothPeripheralUsageDescription

Answer 1

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

所以，如果你这样称呼它们：

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

将调用这些函数。检查owlCarousel事件文档here。

使用CSS转换在OwlCarousel中查看this CodePen示例进度条。

Answer 2

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

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

<强>的javascript：

import React, {Fragment} from 'react'

<强> SCSS

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)
    }
  }
})

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

2 个答案: