Question

我已经编辑了here提供的代码，以满足两个轮播，而不依赖于ID，这样可以正常工作，但我无法在点击时让标签正常工作。（例如，删除课程＆＃34;已同步＆＃34;并正确地将它们添加到点击的标签上。）认为我没有使用功能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);

});

如果以上情况不够，您需要使用＆＃34;中心化＆＃34;风格。

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％有帮助。刚刚问我同样的问题。

多个同步的猫头鹰旋转木马

1 个答案: