Question

我遇到了Flexslider在最终幻灯片后添加额外空格的问题。

我创建了一个702px宽的div，用于一次显示两个342px宽的幻灯片，每个幻灯片之间有18px。我将'itemWidth'设置为'360px'以允许额外空间并将'itemMargin'设置为'0'。

<script type="text/javascript" charset="utf-8">
    $(window).load(function() {
      $('.flexslider').flexslider({
        animation: "slide",
        animationLoop: true,
        itemWidth: 360,
        itemMargin: 0
      });
    });
</script>

这给了我在幻灯片之间需要的适当间距，但最后增加了18px，这是我无法摆脱的生活。更令人讨厌的是，当它应该只需要三个时，它就像第四个滑动转换一样。

这是一个屏幕抓取：http://bit.ly/XHJVeU

请注意底部的四个点。它应该只需要三个就可以显示四张幻灯片。

我已经调整了我能想到的每一点CSS，但仍然没有运气。即使为图像添加填充/边距也不起作用。令人沮丧。

无论哪种方式。我希望有人之前碰到这个问题，这是一个快速解决方案。

提前致谢。

更新：包含HTML以供参考。

<div id="carousel" class="flexslider">
<ul class="slides">
    <li><img src="images/suite-a_01.png" /></li>
    <li><img src="images/suite-a_02.png" /></li>
    <li><img src="images/suite-a_03.png" /></li>
    <li><img src="images/suite-a_04.png" /></li>
</ul>
</div>

感谢。

Answer 1

检查flexslider的实时输出并检查分页栏（它是一个类“flex-control-nav”和“flex-control-paging”。）我刚遇到同样的问题，我发现它有css宽度超出了我的内容，因此在右侧添加了空白区域。

我希望这很清楚。如果我能澄清，请告诉我。

Answer 2

对于遇到这个问题的人，几年来......

确保 Flexslider 中的子元素没有填充或边距会导致它们超出预期宽度。

这就是造成额外想象幻灯片的原因，作为补偿。

.slide {
    margin: 0 !important;
    padding: 0 !important;
}

Flexslider在最终幻灯片的右边增加了额外的空间......

2 个答案: