如何在Owl Carousel 2中为项目添加类? [英] How do I add classes to items in Owl Carousel 2?

问题描述

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

My goal is to make a carousel that looks like this:

如果您不知道要查看的内容，则有5张图像/每条，但只有中间一张以全尺寸显示.中间的图像较小，而外部的图像较小.

In case you don't know what you're looking at, there are 5 images/items but only the center one is displayed in its full size. The images next to the center one are smaller, and the outer ones smaller still.

我已经在Owl Carousel的第一个版本中实现了此功能，但它不支持循环，这使该设计变得荒谬(无法到达侧面图像...).

I've achieved this in the first version of Owl Carousel but it doesn't support looping, which makes this design ridiculous (can't reach the side images...).

这是我的做法:

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%组成.

Just showing you the code for 5 items, but I used some if-clauses to get it working for 3 and 7 as well. The active class is just composed of width: 100% and the passive one width: 80%.

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

Does anyone know how to get the same result in Owl Carousel 2? I'm using _items instead of $owlItems but I don't know if that's correct. There is no afterAction and the events/callbacks don't seem to work as they should in v2.

推荐答案

您可以这样做:

$(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属性.

In the demo, I just add the class big to the main item, and the class medium to the previous and next one. From that you can play with whichever css property you want.

实时演示

注意:

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

You could also just play with plugin classes, .active and .center (or you can also define your own, as you can see here: custom classes

这篇关于如何在Owl Carousel 2中为项目添加类?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！