使用Owl Carousel 2.0显示下一个和上一个项目的一部分 [英] Show part of next and previous items with Owl Carousel 2.0
本文介绍了使用Owl Carousel 2.0显示下一个和上一个项目的一部分的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用 Owl Carousel 2.0 .我想显示一个项目,上一个项目(左侧)的一半(或更少),以及下一个项目(右侧)的一半(或更少).只需将其中一部分放在右侧和左侧即可:
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:
我一直在尝试仅使用CSS(owl-stage-outer
的padding
和margin
负数),但是显然Javascript覆盖了它们.
I've been trying using just CSS (padding
and margin
negative with the owl-stage-outer
) but obviously Javascript override them.
到目前为止,这是我的代码:
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>
推荐答案
最简单的方法是使用 stagePadding
.下面的演示:
The easiest way to do this is by using stagePadding
. Demo below:
$(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>
这篇关于使用Owl Carousel 2.0显示下一个和上一个项目的一部分的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文