我正在使用Owl Carousel 2.0.我想显示前一项(左侧)的一个项目,一半(或更少)以及下一项目(右侧)的一半(或更少).只是把它们的一部分放在右边和左边:

我一直在尝试使用CSS(padding和margin负面的owl-stage-outer),但显然Javascript覆盖它们.
到目前为止,这是我的代码:
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
}
}
})Run Code Online (Sandbox Code Playgroud)
.owl-carousel .item h4 {
color: #FFF;
font-weight: 400;
margin-top: 0em;
}
.owl-carousel .item {
height: 10em;
background: #4DC7A0;
padding: 1em;
}
.wrapper {
width: 40em;
}Run Code Online (Sandbox Code Playgroud)
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<div class="wrapper">
<div class="owl-carousel">
<div class="item">
<h4>1</h4>
</div>
<div class="item">
<h4>2</h4>
</div> …Run Code Online (Sandbox Code Playgroud)