如何将 类 添加到 Owl 轮播 2 中的项目？

Question

我的目标是制作一个如下所示的旋转木马：

如果您不知道自己在看什么，这里有 5 个 images/items，但只有中间那个以全尺寸显示。靠近中心的图像较小，外面的图像更小。

我在第一个版本的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 子句使其也适用于 3 和 7。 active class 只是由 width: 100% 和 passive 组成 width: 80%.

有谁知道如何在 Owl 轮播 2 中获得相同的结果？我使用 _items 而不是 $owlItems 但我不知道这是否正确。没有 afterAction 并且 events/callbacks 似乎在 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');
    });
}); 

收听您选择的活动

List of available events here

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

LIVE DEMO

---

注意：

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

Answer 2

将此添加到您的 css 和 js 文件中。

.owl-carousel.owl-drag .owl-item.center .item {
    background: rgb(25, 0, 255) ;
    transform: scale(1.1)
  }


$(document).ready(function () {

$(".owl-carousel").owlCarousel({
    center: true,
    dots: false,
    loop:true,
    responsive: {
        1900: {
            items: 7
        },
        1440: {
            items: 5
        },
        760: {
            items: 3
        },
        0: {
            items: 1
        }
    }
});

});