我已经编辑了here提供的代码，以满足两个carousel的需要，而不依赖于id，这很好，除了我不能让标签在点击时正常工作。（例如，删除类“synced”并将它们正确地添加到单击的选项卡上。）认为我没有同时使用function syncPosition和function left做正确的事情。
我错过了什么，或者做错了什么？
超文本标记语言：

<!--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>