javascript - 在传送带上的幻灯片之间插入边距/填充

Question

这是一个 jsfiddle 示例:http://jsfiddle.net/72Hf2/

在这个例子中 div#reference是 500px 宽... div#carousel扩展以消耗它。

问题是每个 div.slide 之间没有间距.将任何填充/边距添加到 div.slide会破坏旋转木马，因此我插入了一个 div.thumbnail每个内部 div.slide并在那里应用了我的 margin ，如下所示:http://jsfiddle.net/c34CF/1/

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

据我所知，最好的方法是在 div#carousel 上应用负的左/右边距。然后在每个 div.slide 上应用正的左右边距，它在 jsFiddle 中工作，但它搞砸了实际的旋转木马(JS 代码假定 div#wrapper 是 div.slide 宽度的精确总和)...我需要 fork 那个旋转木马并改变它的工作方式，或者在 CSS 中有解决方法吗？

Answer 1

您可以使用第 n 个子 CSS 选择器来实现，如 http://jsfiddle.net/c34CF/6/ 中所示

DIV:nth-child(6) > .thumbnail{<br/>
        margin-right:0 !important;
    }

但是我想，您可能需要为不同尺寸的轮播添加一些动态元素

如果是这种情况，请尝试以下是否有帮助:

如果您使用的是 jQuery: $(".thumbnail > :nth-child(eqn)").css("margin-right", 0);//这里的“eqn”应该是一个表达式，它将帮助您访问轮播中显示的最后一个缩略图索引。

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

希望这对您有所帮助。