Question

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

Carousel

如果你不知道你在看什么，有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子句来使其适用于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');
    });
});

倾听您选择的事件

List of available events here

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

LIVE DEMO

注：

您还可以使用插件类.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
        }
    }
});

}）;

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

2 个答案: