Flexslider 在加载时下压内容答案

【问题标题】：Flexslider pushing down content when it loadsFlexslider 在加载时下压内容
【发布时间】：2016-12-30 13:48:32
【问题描述】：

我的主页上有不同的部分，上面有锚标记。其中一个部分包含一个全宽的“flexslider”滑块。当我从另一个页面链接到滑块下方的主页上的任何锚点时，视口最初会转到正确的位置。但是当 flexslider 加载时，它会将所有内容都向下推。

我通过为 flexslider 容器定义固定宽度和高度来解决此问题，但这不是一个有效的解决方案，因为我的网站是响应式的。

非常感谢任何解决方案，我整天都在做这个。

编辑：标记：

<div class="flexslider">
    <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    </ul>
 </div>

CSS：

/* FlexSlider Necessary Styles
*********************************/
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide      the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

当我为 .flexslider 类设置固定高度时，页面在滑块加载时不会偏移，但这是 obv 没有响应的。我尝试使用 max-height 代替，但这并没有为滑块“保留”空间。

【问题讨论】：

我们需要一些代码，我们不想猜测您已经拥有什么。

标签： javascript jquery html css flexslider

【解决方案1】：

在您的代码中，将height 和width 的所有实例替换为max-height 和max-width。即使在响应式网站上，这也不应该将内容推到最大边界之外。

如果您需要更具体的帮助，请将您当前的代码编辑发布到您的问题中。

【讨论】：

【解决方案2】：

您可以通过向“幻灯片”元素添加两条额外的 CSS 行来保留空间。

首先，您必须通过将高度与图像的宽度相比较来获得滑块的纵横比，例如你的图片是 2048x820px，比例是 820/2048 ~ 0.4。

那么附加的css行是：

.flexslider .slides {
height: 0;
padding-bottom: 40%; /* if it doesn't fit exactly, try a minimal higher value, eg. 40.05%;  maybe you need to add !important too, to overwrite some previous values */
background: red; /* just for testing purposes, this line can be removed afterwards */
}

【讨论】：

【解决方案3】：

不要使用固定的高度和宽度，而是使用最大高度和最大宽度。

希望对你有帮助

【讨论】：