flexslider - Flexslider 在滑块下方添加巨大的空白

Question

我的 flexslider 下方有大量空白，我不知道如何删除。我已经玩了很多 CSS，但似乎没有任何效果，没有破坏“响应”行为。非常感谢任何帮助。

问候...

站点可以在这里查看，所有代码都位于head标签中： http: //destinjustlisted.com/new/

Answer 1

包含幻灯片项目的 div 必须具有“flexslider”类。在 flexslider.css 中为该类设置了各种东西，这是下载的一部分。它具有的 CSS 属性之一是“边距”。您将在那里看到三个值。它看起来像这样：

margin: 0 0 60px;

我不知道你是否熟悉这种属性格式，但是当你有 4 种设置时，它在 CSS 中很常见，例如边距、边框或填充（所有这些都有 4 个边）。您最多可以有四个值，它们分别代表：上、右、下、左（就像您要绕着时钟转盘，从 12 点开始）。因此，例如：

padding: 0 1px 0 2px;

不会在顶部和底部提供填充，但在右侧 1 个像素和左侧 2 个像素。

flexslider CSS 在底部有 60 像素的边距。如果您想要直观地表示您在幻灯片中的位置或选择特定幻灯片，则可以为导航按钮留出空间。不幸的是，如果您在设置插件时将属性“controlNav”设置为“false”，如果您不想显示那些“按钮”，那么您最终会在控件下看到大的空白区域。如果您只是将该属性设置为此：

margin: 0;

你所有的问题都会迎刃而解！

Answer 2

如果您的图像尺寸不同（尤其是高度），Flexslider 容器将显示为最高的图像。这可能会造成您可能看到的差距。

如果这是原因，请提前调整图像大小，使它们都具有相同的高度和宽度。