2016-01-25 67 views
1

我正在使用WP,並且我想讓這裏的旋轉木馬在最後一個項目之後連續滑動,而不是重複自己。有沒有辦法做到這一點?讓OwlCarousel連續旋轉圖像

enter image description here

您可以查看這裏的網站:http://desertcinema.com/#work

這裏是我的下carousel.js

$(document).ready(function() { 

    var sync1 = $("#sync3"); 
    var sync2 = $("#sync4"); 

    sync1.owlCarousel({ 
    singleItem : true, 
    slideSpeed : 1000, 
    transitionStyle : "fade", 
    navigation: false, 
    pagination:false, 
    afterAction : syncPosition, 
    responsiveRefreshRate : 200, 
     afterInit : progressBar, 
     afterMove : moved, 
     startDragging : pauseOnDragging 
    }); 


    var time = 5; // time in seconds 

    var $progressBar, 
     $bar, 
     $elem, 
     isPause, 
     tick, 
     percentTime; 


    //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(); 
    } 

代碼有沒有一種方法,使圖像連續旋轉?

回答

1

loop:true添加到輪播選項。 More info in docs.變化

sync1.owlCarousel({ 
    singleItem : true, 
    slideSpeed : 1000, 
    transitionStyle : "fade", 
    navigation: false, 
    pagination:false, 
    afterAction : syncPosition, 
    responsiveRefreshRate : 200, 
     afterInit : progressBar, 
     afterMove : moved, 
     startDragging : pauseOnDragging 
    }); 

sync1.owlCarousel({ 
    singleItem : true, 
    slideSpeed : 1000, 
    transitionStyle : "fade", 
    navigation: false, 
    pagination:false, 
    afterAction : syncPosition, 
    responsiveRefreshRate : 200, 
     afterInit : progressBar, 
     afterMove : moved, 
     startDragging : pauseOnDragging, 
    loop: true //added loop 
    }); 
+0

嘗試過,但還是重複和最後一個項目後,滑回:http://desertcinema.com/#work –

+0

'loop'可從V2 owlCarousel的' '。從http://www.owlcarousel.owlgraphic.com/更新您的版本 – mani