jQuery 如何为 Owl Carousel 2 中的项目添加类？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28900207/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I add classes to items in Owl Carousel 2?
提问by Robin Leboeuf
My goal is to make a carousel that looks like this:
我的目标是制作一个看起来像这样的旋转木马：
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.
如果您不知道自己在看什么，有 5 个图像/项目，但只有中间的一个以全尺寸显示。中心旁边的图像更小，而外面的图像更小。
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...).
我已经在 Owl Carousel 的第一个版本中实现了这一点，但它不支持循环，这使得这个设计很荒谬（无法到达侧面图像......）。
Here's how I did it:
这是我如何做到的：
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')
}
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 activeclass is just composed of width: 100%and the passiveone width: 80%.
只是向您展示了 5 个项目的代码，但我使用了一些 if 子句让它也适用于 3 和 7。该active班是刚刚组成的width: 100%和passive一个width: 80%。
Does anyone know how to get the same result in Owl Carousel 2? I'm using _itemsinstead of $owlItemsbut I don't know if that's correct. There is no afterActionand the events/callbacks don't seem to work as they should in v2.
有谁知道如何在 Owl Carousel 2 中获得相同的结果？我正在使用_items而不是，$owlItems但我不知道这是否正确。没有afterAction，并且事件/回调似乎在 v2 中无法正常工作。
回答by Robin Leboeuf
You can do it this way:
你可以这样做：
$(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');
});
});
Listening to the event of your choice
聆听您选择的事件
In the demo, I just add the class bigto the main item, and the class mediumto the previous and next one. From that you can play with whichever css property you want.
在演示中，我只是将类big添加到 main 项，将 class medium 添加到上一个和下一个。从那里你可以使用你想要的任何 css 属性。
NOTE:
笔记：
You could also just play with plugin classes, .activeand .center(or you can also define your own, as you can see here: custom classes
您也可以使用插件类，.active并且.center（或者您也可以定义自己的类，正如您在此处看到的：自定义类
回答by Jaber
add this in your css and js file.
将此添加到您的 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
}
}
});
});
});
