복수 동기화 된 올빼미 캐 러셀

Question

here에서 제공하는 코드를 편집하여 id 종속성없이 두 개의 회전식 캐롤라이나를 처리했습니다. 이는 제대로 작동하지만 탭 클릭이 제대로 작동하지 않는다는 것을 제외하고는 잘 작동합니다. (예 : 동기화 된 클래스를 삭제하고 클릭 한 탭에 올바르게 추가) function 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 % 도움이 될지 확실하지 않습니다. 같은 문제를 가지고 광산을 만들었 어.