多个同步的猫头鹰轮播

Multiple synced owl carousel

本文关键字：猫头鹰 同步      更新时间：2023-09-26

我已经编辑了从这里提供的代码，以满足两个轮播的需求，而不受 id 依赖，这工作正常，除了我无法在点击时让选项卡正常工作。（例如，删除"已同步"的类并将它们正确添加到单击的选项卡上。认为我没有对函数syncPosition和函数left做正确的事情。

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

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

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

相关文章：