javascript - 多个同步 Owl Carousel

Question

我已经编辑了 here 提供的代码为了满足两个轮播而不依赖于 id，它工作得很好，只是我无法让选项卡在单击时正常工作。 (例如，删除“synced”类并将它们正确添加到单击的选项卡上。)我认为我没有对 functionsyncPosition 和 functionleft 做正确的事情。

我在哪里错过了，或者做错了什么？

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% 的帮助。刚刚做了同样的问题。