我的目标是制作一个看起来像这样的旋转木马：
如果你不知道你在看什么,有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-clauses来使它适用于3和7.活动类只包含宽度：100％和被动宽度：80％.
有谁知道如何在Owl Carousel 2中获得相同的结果？我正在使用_items而不是$owlItems,但我不知道这是否正确.没有afterAction,事件/回调似乎不像在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添加到主项,将类添加到上一个和下一个类.从那里你可以玩你想要的任何css属性.
注意：
您也可以使用插件类,.active和.center(或者您也可以定义自己的插件类,如下所示：custom classes
