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

Question

我最近一直试图使用名为Owl-Carousel的脚本来制作div的幻灯片,其中div的间隔为10 px,因此拖动看起来不错.

我制作了完整的代码以显示目的: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中不是这种情况),同时保持绿色区域宽度与红色相同面积宽度.

谢谢

Answer 1

嗯...我想这就是你想要的：

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） - 默认位置始终为 left:0，但是，由于我们需要边框- 我们必须相应地移动它。在 CSS 中（如果我没记错的话:)），我刚刚添加了：

.owl-item {
   border-right:10px solid white; 


}

EDIT2：margin-left，而不是左边，现在应该在所有（现代）浏览器中工作。:)