Javascript 在转盘上的幻灯片之间插入边距/填充

下面是一个JSFIDLE示例：

在本例中，

div#reference

的宽度为500px

div#carousel

扩展以使用它

问题是每个

div.slide

之间没有间距。在

div.slide

中添加任何填充/边距都会破坏旋转木马，因此我在每个

div.slide

中插入了一个

div.缩略图，并在其中应用了边距，如下所示：

然而，这在最后留下了一个缺口。我必须在最后没有空隙。。但是，我不能简单地使用
：last child
，因为最后一张可见幻灯片不是DOM中的最后一个元素。如何在没有间隙问题的情况下实现幻灯片之间的间距

据我所知，最好的方法是在
div#carousel
上应用一个负的左/右边距，然后在每个
div.slide
上应用一个正的左/右边距，这在jsFiddle中起作用，但会使实际的carousel出错（JS代码假定
div#wrapper
是
div.slide
宽度的精确总和）…我需要分叉该旋转木马并更改其工作方式，还是CSS中有解决方法？
您可以使用第n个子CSS选择器来完成，如

DIV:n子级（6）>。缩略图{

右边距：0！重要；
}


然而，我想，你可能需要一些动态的不同大小的旋转木马

如果是这种情况，请尝试以下帮助：

如果您使用的是jQuery：
$（“.thumbnail>：nth child（eqn）”）.css（“右边距”，0）；//这里的“eqn”应该是一个表达式，它将帮助您访问旋转木马中显示的最后一个缩略图索引

如果您没有使用jQuery，请尝试使用基本javascript使用第n个子选择器属性

希望这能有所帮助。
您可以使用
：first child
并将右边距替换为左边距，而不是使用
：last child

应该是这样的：

.thumbnail {
    border:1px red solid;
    margin-left:15px;
}

.slide:first-child .thumbnail {
    margin-left: 0;
}

如果您不必担心IE7或更低版本，可以通过将
框大小设置为
边框框
来跳过添加
缩略图
选项

.slide {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;    /* not sure if the prefixes are still needed */
    margin-left: 15px;
}

.slide:first-child{
    margin-left: 0;
}

框大小控制边距和填充如何影响元素的宽度。默认值为
内容框
，其工作方式与您习惯的方式相同：元素有一个宽度，比如说100px，边距和填充在此基础上延伸。因此，如果边距为10px，填充为5px，则宽度+边距+填充将等于130

将属性设置为
边框框
时，宽度包括边距和填充。因此，100px宽度+10px+5px填充的总宽度将为…100px！换句话说，边距和填充会挤压内容，而不是向外推送更多空间。Chris Coyier作为一个a和一个a来查看它的操作

编辑：使用
：第一个孩子拉小提琴
：

相关代码：

#wrapper {
    position:relative;
    left:0;
    width:1300px;
    margin-left:-115px; /* This is the width + margin of .slide */
}

.slide {
    width:100px;
    float:left;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;    /* not sure if the prefixes are still needed */
    margin-left: 15px;
}

.slide:first-child {
    margin-left: 0;
}

滑动旋转木马（
#wrapper
）时只需考虑边距。它不会移动-100px，而是移动-115px（额外的15px是您设置边距的值）。只需知道，如果需要它在IE8中工作，您必须创建一个多边形填充（）.
感谢您目前的回复。当用户浏览旋转木马时，最左/最右位置的幻灯片会有所不同。请参阅我的第一张js小提琴中CSS的第22行。这就是为什么幻灯片“2”是旋转木马中第一张可见的幻灯片。
：第一个子幻灯片
将与幻灯片“1”匹配，幻灯片“1”不在第一个位置，但在第一个位置“-1”如果你愿意。看看这个：。你只需要在
左边距：-yyyypx
中计算边距。它不是移动100px，而是移动115px（额外的15px是你设置的边距）。只要知道如果你需要它在IE8中工作，你必须创建一个多边形填充（）。我将调整我的答案以反映这一点。对不起，我在评论中留下的小提琴已经插入了正确的CSS（现在编辑它已经太晚了！）。请看我答案中的新提琴。谢谢，这可能会起作用。我只需要修改javascript，使其考虑到15px的填充。此外，您最新的JSFIDLE会删除最后一张幻灯片，因为边框框仅包括填充和边框，而您的15px间距是以边距的形式出现的-但它将与填充一起使用。slide and sho继续。缩略图。-明天我会进行更多测试，如果答案有效，我会接受你的答案。啊-你说得对！我会为后代修改我的答案。让我知道结果如何。谢谢。在我的JSFIDLE中，包含文本“2”的幻灯片位于位置1。包含“1”的幻灯片位于位置-1（不可见）。一旦用户推进旋转木马，任何
*-子
样式选择器将不再匹配相应的元素。我担心使用JS添加/删除类会导致元素突然“跳转”。有一个按钮会导致旋转木马推进一张幻灯片，另一张幻灯片会推进一页（5张幻灯片），并且在推进5张幻灯片时，动画播放时间更长…因此动态添加/删除填充&不弄乱这些复杂的动画将是一项功能，因为注释空间不足，但我想添加此功能。我在您的小提琴中编辑了第22行，以模拟用户推进幻灯片，以说明问题-您将看到现在存在一个间隙，因为样式设置与错误的元素匹配。它与上一个但不再是最后一个的元素匹配。
#wrapper {
    position:relative;
    left:0;
    width:1300px;
    margin-left:-115px; /* This is the width + margin of .slide */
}

.slide {
    width:100px;
    float:left;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;    /* not sure if the prefixes are still needed */
    margin-left: 15px;
}

.slide:first-child {
    margin-left: 0;
}