10

我的目标是制作一个看起来像这样的轮播：

旋转木马

如果您不知道自己在看什么，则有 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 中那样工作。

4

2 回答 2

15

你可以这样做：

$(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添加到主项，将类medium到上一个和下一个。从那里你可以玩任何你想要的css属性。

现场演示

笔记：

您也可以只使用插件类，.active并且.center（或者您也可以定义自己的，如您在此处看到的：自定义类

于 2015-03-06T16:55:39.017 回答
0

将此添加到您的 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
        }
    }
});

});

于 2019-01-31T10:14:56.003 回答