多個已同步的貓頭鷹傳送帶

Question

我編輯了從here提供的代碼以滿足兩個傳送帶的需求，而不依賴於ID，這很好，除非我無法在點擊時使標籤正常工作。 （例如，刪除「同步」類，並將它們添加到點擊標籤中。）認爲我沒有做正確的函數syncPosition和函數左。

我錯過了哪裏，或者錯了？

HTML：

<!--Carousel 1--> 
<div class="tabslider"> 
    <div class="owl-carousel tabthumb"> 
    <div class="item" >1</div> 
    <div class="item" >2</div> 
    <div class="item" >3</div> 
    <div class="item" >4</div> 
    <div class="item" >5</div> 
    </div> 
    <div class="owl-carousel tabcontent"> 
    <div class="item">Content 1</div> 
    <div class="item">Content 2</div> 
    <div class="item">Content 3</div> 
    <div class="item">Content 4</div> 
    <div class="item">Content 5</div> 
    </div> 
</div> 
<!--Carousel 2--> 
<div class="tabslider"> 
<div class="owl-carousel tabthumb"> 
    <div class="item" >1</div> 
    <div class="item" >2</div> 
    <div class="item" >3</div> 
    <div class="item" >4</div> 
</div> 
<div class="owl-carousel tabcontent"> 
    <div class="item">Content 1</div> 
    <div class="item">Content 2</div> 
    <div class="item">Content 3</div> 
    <div class="item">Content 4</div> 
</div> 

腳本：

<script> 
    $(document).ready(function() { 

     $('.tabslider').each(function(){ 

     var sync1 = $(this).children(".tabcontent"); 
     var sync2 = $(this).children(".tabthumb"); 

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

     sync2.owlCarousel({ 
      items : 3, 
      itemsDesktop  : [1199,3], 
      itemsDesktopSmall  : [979,3], 
      itemsTablet  : [768,2], 
      itemsMobile  : [479,2], 
      pagination:false, 
      navigation: false, 
      navigationText: [ 
      "<i class='icon-arrow-left7'></i>", 
      "<i class='icon-uniE6E2'></i>" 
      ], 
      responsiveRefreshRate : 100, 
      afterInit : function(el){ 
      el.find(".owl-item").eq(0).addClass("synced"); 
      } 
     }); 

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

      if($(this).children(".tabthumb").data("owlCarousel") !== undefined){ 
      left(current) 
      console.log(this) 
      } 

     } 

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

     }); 

     function left(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) 
      } 
     } 

     }) 

    }); 
    </script> 

Answer 1

JS：

//remove the following(and its closing tag of course) : 

    $('.tabslider').each(function(){ 


//modify this part: 
$(this).children(".tabthumb").on("click", ".owl-item", function(e) 
{ 
    //we modify our trigger to only apply to our current gallery, not all of them 
    e.preventDefault(); 
    var number = $(this).data("owlItem"); 

    //The navigation with the thumbnails 
    var $thumbnailNavWrapper = $(this).closest('your-thumbnail-navigation-class'); 

    //the slider with the big images .prev or .next depending on 
whether we find our slider before or next to the thumbnail navigation 
    $sync1 = $thumbnailNavWrapper.prev(); 

    sync1.trigger("owl.goTo",number); 

}); 

如果上面是不夠的，你需要一個縮略圖導航帶有「中心化「風格。

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


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

    else 
    { 
     $sync2.trigger("owl.goTo", num-1); 
    } 
    } 

不知道這是否會100％幫助。剛剛提出了同樣的問題。