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

how can I change the height of a jquery flexslider belongs to jquery.flexslider-min.js file?

本文关键字：文件 jquery-flexslider 高度 js flexslider-min 何更改 属于 jquery      更新时间：2023-09-26

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

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

提前谢谢。

在没有看到代码的情况下，很难说问题出在哪里，但我过去在使用静态值定位项目时遇到过这个问题。从本质上讲，高度会发生变化，但静态位置不会发生变化，这会使元素偏移一点。如果这是你的问题，你可以这样解决：

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; }

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

JSFiddle演示

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

使用CSS：

.flexslider .slides img {
   max-width: 100%; 
   height: 748px; //set height in pixel here
   display: block;
 }
相关文章：