使用Owl Carousel 2.0显示下一个和上一个项目的一部分
我正在使用Owl Carousel 2.0 。 我想显示前一项（左侧）的一个项目，一半（或更少）以及下一项目（右侧）的一半（或更少）。 只是把它们的一部分放在右边和左边：
我一直在尝试使用CSS（使用owl-stage-outer padding和margin负）但显然Javascript会覆盖它们。
到目前为止，这是我的代码：
$('.owl-carousel').owlCarousel({ loop: true, margin: 10, nav: true, responsive: { 0: { items: 1 }, 600: { items: 3 } } })
.owl-carousel .item h4 { color: #FFF; font-weight: 400; margin-top: 0em; } .owl-carousel .item { height: 10em; background: #4DC7A0; padding: 1em; } .wrapper { width: 40em; }
1
2
3
4
5
6
7
8
9
10
11
12
最简单的方法是使用stagePadding 。 演示如下：
$(function() { $('.owl-carousel').owlCarousel({ margin: 10, loop: true, items: 1, stagePadding: 100 }); });
我在自定义代码中使用了一半的值，如上所述。 希望能帮助到你。
$("#owlCarousel").owlCarousel({ itemsCustom: [ [0, 1], /* Show half of next item */ [450, 1.5], [600, 2.5], [700, 3], [800, 3], [1000, 4], [1200, 4], [1400, 4], [1600, 4] ], lazyLoad: true, navigation: false, });