如何在Owl Carousel 2中为项添加类？

我的目标是制作一个看起来像这样的旋转木马：

如果你不知道你在看什么，有5个图像/项目，但只有中心的一个以完整尺寸显示。 中心旁边的图像较小，外部图像较小。

我在Owl Carousel的第一个版本中实现了这个，但是它不支持循环，这使得这个设计很荒谬（无法到达侧面图像……）。

我是这样做的：

var owl = $("#owl-demo"); owl.owlCarousel({ pagination: false, lazyLoad: true, itemsCustom: [ [0, 3], [900, 5], [1400, 7], ], afterAction: function(el){ .$owlItems .removeClass('active') //what I call the center class .removeClass('passive') //what I call the next-to-center class this .$owlItems .eq(this.currentItem + 2) //+ 2 is the center with 5 items .addClass('active') this .$owlItems .eq(this.currentItem + 1) .addClass('passive') this .$owlItems .eq(this.currentItem + 3) .addClass('passive') } 

只显示5个项目的代码，但我使用了一些if-clauses来使它适用于3和7。 active类只包含width: 100%和passive width: 80% 。

有谁知道如何在Owl Carousel 2中获得相同的结果？ 我正在使用_items而不是$owlItems但我不知道这是否正确。 没有afterAction ，事件/回调似乎不像在v2中那样工作。

Answer 1

你可以这样做：

 $(function(){ $('.loop').owlCarousel({ center: true, items:5, loop:true, margin:10 }); $('.loop').on('translate.owl.carousel', function(e){ idx = e.item.index; $('.owl-item.big').removeClass('big'); $('.owl-item.medium').removeClass('medium'); $('.owl-item').eq(idx).addClass('big'); $('.owl-item').eq(idx-1).addClass('medium'); $('.owl-item').eq(idx+1).addClass('medium'); }); }); 

倾听您选择的事件

此处列出了可用事件

在演示中，我只是将类big添加到主项，将类添加到上一个和下一个类。 从那里你可以玩你想要的任何css属性。

现场演示

---

注意：

您也可以使用插件类， .active和.center （或者您也可以定义自己的插件，如您所见： 自定义类