jQuery 使用 Owl Carousel 2.0 显示下一个和上一个项目的一部分
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25304439/
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
Show part of next and previous items with Owl Carousel 2.0
提问by Big-beef
I'm using Owl Carousel 2.0. I would like to show one item, a half (or less) of the previous item (left side) and a half (or less) of the next item (right side). Just putting a part of them out on the right and on the left side:
我正在使用Owl Carousel 2.0。我想显示一个项目，前一个项目（左侧）的一半（或更少）和下一个项目（右侧）的一半（或更少）。只需将其中的一部分放在右侧和左侧：
I've been trying using just CSS (paddingand marginnegative with the owl-stage-outer) but obviously Javascript override them.
我一直在尝试只使用 CSS（padding并使用margin否定owl-stage-outer），但显然 Javascript 覆盖了它们。
Here's my code so far:
到目前为止，这是我的代码：
$('.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;
}<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>
<div class="item">
<h4>3</h4>
</div>
<div class="item">
<h4>4</h4>
</div>
<div class="item">
<h4>5</h4>
</div>
<div class="item">
<h4>6</h4>
</div>
<div class="item">
<h4>7</h4>
</div>
<div class="item">
<h4>8</h4>
</div>
<div class="item">
<h4>9</h4>
</div>
<div class="item">
<h4>10</h4>
</div>
<div class="item">
<h4>11</h4>
</div>
<div class="item">
<h4>12</h4>
</div>
</div>回答by witrin
The easiest way to do this is by using stagePadding. Demo below:
最简单的方法是使用stagePadding. 演示如下：
$(function() {
$('.owl-carousel').owlCarousel({
margin: 10,
loop: true,
items: 1,
stagePadding: 100
});
});<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="owl-carousel">
<div class="item"><img src="//placehold.it/350x150&text=1" /></div>
<div class="item"><img src="//placehold.it/350x150&text=2" /></div>
<div class="item"><img src="//placehold.it/350x150&text=3" /></div>
<div class="item"><img src="//placehold.it/350x150&text=4" /></div>
<div class="item"><img src="//placehold.it/350x150&text=5" /></div>
<div class="item"><img src="//placehold.it/350x150&text=6" /></div>
<div class="item"><img src="//placehold.it/350x150&text=7" /></div>
<div class="item"><img src="//placehold.it/350x150&text=8" /></div>
</div>回答by Leonardo Assis
I used half values in the custom code like the above. Hope it helps.
我在上面的自定义代码中使用了半值。希望能帮助到你。
$("#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,
});
回答by M?nh Hà Nguy?n ??c
My code work well, the easiest way
我的代码运行良好，最简单的方法
<style>
/***** you should change (75px) for your own *****/
#pro-slider{width: calc(100% - 75px);}
#pro-slider .owl-stage-outer{overflow:unset;}
</style>
<script>
jQuery(document).ready(function(){
$('#pro-slider').owlCarousel({
//items: depend on u
items:1,
});
}
</script>
回答by SerkanS
Also if you want to have part of next item only from right side, use as @witrin mentioned:
此外，如果您只想从右侧获得下一项的一部分，请使用@witrin 提到的：
$('.owl-carousel').owlCarousel({
margin: 10,
loop: true,
items: 1,
stagePadding: 30
});
and also in your style write the css:
并以您的风格编写 css：
.owl-stage{
left:-30
}
Have a good code.
有一个好的代码。
