叠加div之间的间距,不影响宽度

时间:2015-04-17 21:08:41

标签: javascript html css css3 owl-carousel

我最近尝试使用名为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中不是这种情况),同时保持绿色区域宽度相同作为红色区域宽度。

由于

2 个答案:

答案 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答案的范围。