我最近尝试使用名为Owl-Carousel的脚本制作div的幻灯片,其中div的间距均为10像素,因此拖动看起来不错。
我制作了完整的代码以显示目的: http://codepen.io/anon/pen/VLZmWd
我尝试修改边距但没有成功。
CSS如下:
.generic { // header on top of slide, must have wrapper width
background-color:red;
height: 30px;
text-align:center;
}
.item { // item (slide) inside the owl carousel, must have wrapper width
height: 300px;
background-color: #7FFFD4;
//margin-right:10px; // gives the spacing between slides, but works so bad
}
#wrapper { // wraps carousel and elements with generic class
margin:0px auto;
width:720px;
height: auto;
}
如何将幻灯片彼此间隔10px,同时保持红色/绿色区域的宽度和.generic类不变。
我希望类“.generic”保持不变的原因主要是我对代码的设置方式,因此CSS很容易修改宽度:我有很多不同的类/元素是假设的为了代码的可管理性,我希望不必为每个设置宽度或设置边距。
编辑:为了说清楚,当在旋转木马上使用鼠标拖动时,我的目标是在每个幻灯片绿色幻灯片之间看到10px的白色(在codepen中不是这种情况),同时保持绿色区域宽度相同作为红色区域宽度。
由于
答案 0 :(得分:2)
嗯......我认为这就是你想要的:
http://codepen.io/anon/pen/QbLdpv
$(document).ready(function() {
$("#owl-demo").owlCarousel({
navigation : true, // Show next and prev buttons
slideSpeed : 300,
paginationSpeed : 400,
singleItem:true,
afterMove: function (elem) {
var index = this.owl.currentItem;
$('.owl-wrapper').css('margin-left',-10*(index)+'px')
}
});
});
要获得所需的行为,您必须移动容器(.owl-wrapper) - 默认位置始终保留:0,但是,因为我们需要边框 - 我们必须相应地移动它。在CSS(如果我记得很清楚:)),我刚刚添加:
.owl-item {
border-right:10px solid white;
}
EDIT2:margin-left,而不是左边,现在应该适用于所有(现代)浏览器。 :)
答案 1 :(得分:1)
您可以向meow
应用保证金,并在每个保险箱周围添加一个容器,这使得它们小于容器的总大小,增加保证金。 http://codepen.io/anon/pen/aOopOK
如果您不想更改HTML,也可以使用box-sizing来获得相同的效果。 http://codepen.io/anon/pen/QbLdbG
但是,我建议你自己开发这个功能,不要使用owl-carousel,特别是如果你只是学习JS。它不是一个特别复杂的概念,但肯定超出了stackoverflow答案的范围。