Owl Carousel 2 与项目中心同步演示

Question

例如“demo-codepen”，有4个缩略图，我只希望它只有3个（项目：3）并且活动（背景蓝色）总是在中心，怎么办？

例如“demo-jsfiddle”，第一项和最后一项是错误的。请帮我。谢谢。

enter view demo

demo-codepen demo-jsfiddle

如何让所有可以循环一起顺利同步？

Answer 1

我已使用以下方法更新了您的代码：

• 添加自定义导航按钮
• 改变这些滑块的位置相同的位置

自定义导航代码。

$(".owl-next").click(function(){
     if(owl1.currentItem + owl1.visibleItems.length < owl1.owlItems.length){
            itemClicked = 1;
        sync1.trigger('owl.next');        
     } else if(owl1.currentItem + itemClicked <= owl1.owlItems.length){
                var next = owl1.currentItem + itemClicked;
          console.log(next);
                sync2.find(".owl-item")
          .removeClass("synced")
          .eq(next)
          .addClass("synced");
          itemClicked += 1;          
                sync2.trigger("owl.goTo",next);
     }else{
            itemClicked = 1;
            sync1.trigger('owl.next');
     }
 });
  $(".owl-prev").click(function(){

     if(owl1.currentItem - owl1.visibleItems.length > 0){
        itemClicked = 1;
            sync1.trigger('owl.prev');
     }else if(owl1.currentItem + itemClicked <= 0){
            var prev = owl1.currentItem - itemClicked;
                sync2.find(".owl-item")
          .removeClass("synced")
          .eq(prev)
          .addClass("synced");
          itemClicked += 1;          
                sync2.trigger("owl.goTo",prev);
     }else{
       sync1.trigger('owl.prev');
     }
 });

此处代码：Code Demo

Answer 2

用于您的演示代码笔。要将缩略图设置为三个，请在您的 JS 代码中设置 var slidesPerPage = 3 并将活动项目设置在中心，请在 sync2 轮播中设置 center: true

对于 demo-jsfiddle，您可以使用更新版本的 owl carousel。目前，您使用的是没有无限循环的 1.3.3。您可以使用具有此功能的最新版本，它将确保第一个和最后一个项目保持同步