Question

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

由于

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） - 默认位置始终保留：0，但是，因为我们需要边框 - 我们必须相应地移动它。在CSS（如果我记得很清楚:)），我刚刚添加：

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


}

EDIT2：margin-left，而不是左边，现在应该适用于所有（现代）浏览器。：）

Answer 2

您可以向meow应用保证金，并在每个保险箱周围添加一个容器，这使得它们小于容器的总大小，增加保证金。 http://codepen.io/anon/pen/aOopOK

如果您不想更改HTML，也可以使用box-sizing来获得相同的效果。 http://codepen.io/anon/pen/QbLdbG

但是，我建议你自己开发这个功能，不要使用owl-carousel，特别是如果你只是学习JS。它不是一个特别复杂的概念，但肯定超出了stackoverflow答案的范围。

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

2 个答案: