javascript - 如何更改属于 jquery.flexslider-min.js 文件的 jquery flexslider 的高度？

Question

我的 wordpress 主题包含一个 jquery flexslider(版本:jquery.flexslider-min.js)，问题是当我试图通过修改 slider 的高度参数(通过设置 fix 和auto) 在 .css 中并上传较窄的图片， slider 似乎以预期的形状显示，但导航箭头(左、右)到达了 slider 的底部，而不是它在中间的原始位置。

如果有人能提供帮助并给出问题的确切解决方案，我将非常感激。

提前谢谢你。

Answer 1

在没有看到您的代码的情况下，很难确切地说出问题所在，但我过去在使用静态值定位元素时遇到过这个问题。本质上，高度会改变，但静态位置不会，这会使您的元素稍微偏移。如果这是是您的问题，您可以这样解决:

HTML

<div class="flex-nav-container">
    <ul class="flex-direction-nav">
        <li><a class="flex-prev">Previous</a></li>
        <li><a class="flex-next">Next</a></li>
    </ul>
</div>

CSS

.flex-nav-container { position: relative; height: 300px; //or whatever }
.flex-direction-nav a { position: absolute; height:30px; top: 50%; margin-top: -15px; }
.flex-prev { left: 0; }
.flex-next { right: 0; }

这将使箭头元素的顶部居中到 slider 高度的 50% 点。通过将负边距添加为箭头高度的一半，无论 slider 的高度如何，您基本上都将箭头垂直居中。

JSFiddle Demo

尝试更改 .slider 的高度以查看实际发生的情况。我添加了一些颜色来显示元素。