貓頭鷹旋轉木馬「同步」無限循環

我在互聯網上發現了這個代碼，但問題是它不是無限循環，它所做的是如果最後一個項目顯示它倒回到第一個項目。是否有可能使它無限？貓頭鷹旋轉木馬「同步」無限循環

因爲如果您在該轉盤上有一百個項目，則可能會因爲此而減慢其他設備。

這裏是同步演示 http://owlgraphic.com/owlcarousel/demos/sync.html

感謝

=============================

下面的代碼

$(document).ready(function() { 

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

      sync1.owlCarousel({ 
      singleItem : true, 
      slideSpeed : 1000, 
      navigation: true, 
      pagination:false, 
      afterAction : syncPosition, 
      responsiveRefreshRate : 200, 
      autoPlay: 3000, 
      }); 

      sync2.owlCarousel({ 
      items : 15, 
      itemsDesktop  : [1199,10], 
      itemsDesktopSmall  : [979,10], 
      itemsTablet  : [768,8], 
      itemsMobile  : [479,4], 
      pagination:false, 
      responsiveRefreshRate : 100, 
      afterInit : function(el){ 
       el.find(".owl-item").eq(0).addClass("synced"); 
      } 
      }); 



      function syncPosition(el){ 
      var current = this.currentItem; 
      $("#sync2") 
       .find(".owl-item") 
       .removeClass("synced") 
       .eq(current) 
       .addClass("synced") 

      if($("#sync2").data("owlCarousel") !== undefined){ 
       center(current) 
      } 


      } 

      $("#sync2").on("click", ".owl-item", function(e){ 
      e.preventDefault(); 
      var number = $(this).data("owlItem"); 
      sync1.trigger("owl.goTo",number); 
      }); 

      function center(number){ 
      var sync2visible = sync2.data("owlCarousel").owl.visibleItems; 

      var num = number; 
      var found = false; 
      for(var i in sync2visible){ 
       if(num === sync2visible[i]){ 
       var found = true; 
       } 
      } 

      if(found===false){ 
       if(num>sync2visible[sync2visible.length-1]){ 
       sync2.trigger("owl.goTo", num - sync2visible.length+2) 
       }else{ 
       if(num - 1 === -1){ 
        num = 0; 
       } 
       sync2.trigger("owl.goTo", num); 
       } 
      } else if(num === sync2visible[sync2visible.length-1]){ 
       sync2.trigger("owl.goTo", sync2visible[1]) 
      } else if(num === sync2visible[0]){ 
       sync2.trigger("owl.goTo", num-1) 
      } 
      } 

     });

來源

2016-08-14 Chenge TheRules

你的問題不是很清楚，但嘗試使用這個：http://stackoverflow.com/questions/20345522/is-it-possible-to-implement -a圓形無限傳送帶-使用貓頭鷹傳送帶？RQ = 1。 –

謝謝@MadalinaTaina，我的意思是，當選擇最後一個縮略圖而不是循環播放輪播時，它會滾動到第一個縮略圖。 –

我喜歡這個貓頭鷹旋轉木馬，因爲它是響應式的 –

請使用轉盤的最後一個版本，並使用loop:true：http://www.owlcarousel.owlgraphic.com/demos/basic.html

$('.owl-carousel').owlCarousel({ 
    loop:true, 
    margin:10, 
    nav:true, 
    responsive:{ 
     0:{ 
      items:1 
     }, 
     600:{ 
      items:3 
     }, 
     1000:{ 
      items:5 
     } 
    } 
})

HTML：

<div class="owl-carousel"> 
    <div class="item"> 
     <img src="https://static.pexels.com/photos/136301/pexels-photo-136301-medium.jpeg" alt=""> 
    </div> 
    <div class="item"><h4>2</h4></div> 
    <div class="item"><h4>3</h4></div> 
    <div class="item"><h4>4</h4></div> 
    <div class="item"><h4>5</h4></div> 
    <div class="item"><h4>6</h4></div> 
</div>

來源

2016-08-14 05:59:34

謝謝，但對於同步演示，有縮略圖和圖像，似乎沒有解決方案嗎？ –

@ChengeTheRules把你所有的代碼放在這裏，我會幫你。我真的不明白什麼不適合你。只需添加圖像... –

當您到達最後一張幻燈片，然後單擊下一個它倒回到第一個幻燈片，而不是繼續循環:)再次感謝:) –

貓頭鷹旋轉木馬「同步」無限循環

回答

相關問題