2016-01-25 4 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

Смежные вопросы