![](/img/trans.png)
[英]owl carousel circular progress bar with classyloader gives a getContext error
[英]How to create progress bar for Owl Carousel 2?
貓頭鷹1進度條的官方較舊鏈接甚至不再起作用,但我發現了有效的示例,但貓頭鷹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;
}
不會觸發回調函數,因為您是在owlCarousel 2中不存在的事件上調用它們的。這些事件的前綴為'on'。
因此,如果您這樣稱呼他們:
$("#owl-demo").owlCarousel({
items: 1,
onInitialized : progressBar,
onTranslate : moved,
onDrag : pauseOnDragging
});
這些函數將被調用。 在此處檢查owlCarousel事件文檔。
查看此CodePen ,了解使用CSS轉換的OwlCarousel中的示例進度欄。
在遇到對進度條的需求后,我偶然發現了這個問題,以及帶有owl-carousel v1 的進度條的示例 。
使用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)
}
}
})
腳本
.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%;
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.