Owl Carousel 2의 진행률 표시 줄을 만드는 방법은 무엇입니까? 올빼미 1 진행률 막대 <a href="http://www.owlgraphic.com/owlcarousel/demos/progressBar.html" rel="nofollow noreferrer">link</a> 이전

Question

공식도 더 이상 작동하지 않습니다하지만 난 발견했다 example 작업뿐만 아니라 올빼미 1.

위해 나는 코드를 사용하려고 노력하지만 난과 함께 작동하도록 설정할 수 없습니다입니다 http://codepen.io/anon/pen/GrgEaG

당신이 이벤트는 '에'로 시작되는 owlCarousel 2에 존재하지 않는 이벤트를 호출하고 있기 때문에 콜백 함수가 해고되지 않는

$(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; 
} 

Answer 1

올빼미 2.

그래서 당신은이처럼 그들을 호출하는 경우 :

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

함수가 호출됩니다. owlCarousel 이벤트 문서 here을 확인하십시오.

CSS 전환을 사용하여 OwlCarousel의 예제 진행률 막대를 확인하십시오. this CodePen을 확인하십시오.