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

为您的demo-codepen。如果缩略图为3，则在JS代码中设置var slidesPerPage = 3，并将活动项目放在中心，在sync2轮播中设置center: true

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

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

2 个答案: