2

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

我创建了一个 702 像素宽的 div，旨在一次显示两张 342 像素宽的幻灯片，每张幻灯片之间有 18 像素。我已将“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>

这为我提供了幻灯片之间所需的适当间距，但在最后增加了一个额外的 18 像素，这是我终生无法摆脱的。更烦人的是，当它应该只需要三个时，它将它视为第四个滑动过渡。

这是屏幕截图：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>

谢谢。

4

2 回答 2

2

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

我希望这很清楚。让我知道我是否可以澄清。

于 2013-04-20T12:33:19.697 回答
0

对于遇到此问题的任何人，几年后...

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

这就是导致额外的假想幻灯片的原因，作为补偿。

.slide {
    margin: 0 !important;
    padding: 0 !important;
}
于 2017-12-11T03:41:16.537 回答