如何为 Owl Carousel 2 中的项目添加类？答案

【问题标题】：How do I add classes to items in Owl Carousel 2?如何为 Owl Carousel 2 中的项目添加类？
【发布时间】：2015-05-08 03:24:24
【问题描述】：

我的目标是制作一个如下所示的轮播：

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

【问题讨论】：

标签： jquery carousel owl-carousel owl-carousel-2

【解决方案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 类添加到主项，将 medium 类添加到上一个和下一个。从中你可以使用任何你想要的 css 属性。

LIVE DEMO

注意：

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

【讨论】：

看起来很棒！不过，会做一些工作让它在我的页面上工作。我需要那些主题文件吗？我下载猫头鹰 2 时没有得到这些。
我不知道为什么它们不在 zip 包中，但你可以在 github 项目 (github.com/smashingboxes/OwlCarousel2/tree/develop/src/css) 上找到它。你不是绝对需要它，但我附加了在 owl site demo 上设置小提琴的样式；）
此功能仅适用于单个滑块而不是多个。有可能这个功能都是滑块。
所有你的活动链接的演示已弃用，请刷新你的代码@RobinLeboeuf
嗨@Spectr，我在这里没有看到任何弃用的东西，是什么让你这么认为？

【解决方案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
        }
    }
});

});

【讨论】：