jQuery Flexslider 箭头未正确显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19817603/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Flexslider arrows not displayed properly
提问by thosetinydreams
I've been stuck with this problem for some time, and can't seem to find an answer, so I decided to ask straight.
我已经被这个问题困住了一段时间，似乎找不到答案，所以我决定直接问。
I am using the Flexslider plugin to display multiple images on a site, however, the arrows navigation that displays when hovering the image is off. The arrow is cut off at the top, and the text underneath it that is supposed to be completely hidden is partly showing. Here is a screen shot of the problem:
我正在使用 Flexslider 插件在站点上显示多个图像，但是，悬停图像时显示的箭头导航已关闭。箭头在顶部被切断，其下方应该完全隐藏的文本部分显示。这是问题的屏幕截图：
I tried tinkering with the CSS, but I just can't figure it out. Could anyone please help me?
我尝试修改 CSS，但我就是想不通。有人可以帮我吗？
回答by And390
You can also add line-heightto solve it:
您还可以添加line-height来解决它：
.flex-direction-nav a {
line-height: 40px;
}
PS: It seems like a Flexslider bug, that it does not work properly with default settings.
PS：这似乎是一个 Flexslider 错误，它在默认设置下无法正常工作。
回答by Stuart Kershaw
Remove overflow: hidden;from .flex-direction-nav a:
删除overflow: hidden;来自.flex-direction-nav a：
.flex-direction-nav a {
display: block;
width: 40px;
height: 40px;
margin: -20px 0 0;
position: absolute;
top: 50%; z-index: 10;
overflow: hidden; /* Remove this line */
opacity: 0;
cursor: pointer;
color: rgba(0,0,0,0.8);
text-shadow: 1px 1px 0 rgba(255,255,255,0.3);
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
}
If you need to alter or remove the text that shows up by default for 'Previous' and 'Next', consult the options documentation 'Tailor to Your Needs' for the plugin here: http://www.woothemes.com/flexslider/
如果您需要更改或删除“上一个”和“下一个”默认显示的文本，请在此处查阅插件的选项文档“根据您的需求定制”：http: //www.woothemes.com/flexslider/
Following that, just update the settings for:
之后，只需更新以下设置：
prevText: "Previous", //String: Set the text for the "previous" directionNav item
nextText: "Next",????????//String: Set the text for the "next" directionNav item
回答by JWPersh
I managed to get it working by changing the font size of "flexslider-icon" in the flexslider CSS (around line 70 in flexslider.css).
我设法通过更改 flexslider CSS 中“flexslider-icon”的字体大小（大约在 flexslider.css 中的第 70 行）使其工作。
It seems to be set to 40px at default, but changing it to 30px has worked perfectly on two websites I'm building.
它似乎默认设置为 40px，但将其更改为 30px 已在我正在构建的两个网站上完美运行。
回答by Tauphik Ahamad
Open your "jquery.flexslider.js" file and search "// Primary Controls"at line 1125 (approximately). You'd find,
打开您的“jquery.flexslider.js”文件并"// Primary Controls"在第 1125 行（大约）处搜索。你会发现，
// Primary Controls
controlNav: true,
directionNav: true,
prevText: "Previous",
nextText: "Next",
Here, you need to remove the next and prev text, and save it again.
在这里，您需要删除下一个和上一个文本，然后再次保存。
Hope this will help.
希望这会有所帮助。
回答by Chris Happy
Just add
只需添加
.flex-direction-nav li a{
height:50px;
}
This overrides the default css
这会覆盖默认的 css
回答by Mr Digital
The arrow, which is a font, is too large for its container.
箭头是一种字体，对于它的容器来说太大了。
Just add this CSS, it will reduce the size of the font, and in turn, fix the cut off issue.
只需添加此 CSS，它将减小字体的大小，进而修复截断问题。
.flex-direction-nav a:before {
font-family: "flexslider-icon";
font-size: 35px;
display: inline-block;
content: '\F001';
color: rgba(0, 0, 0, 0.8);
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}
Add this into your CSS and it will override the default settings for flexslider
将此添加到您的 CSS 中，它将覆盖 flexslider 的默认设置
