Flexslider 箭头未正确显示 [英] Flexslider arrows not displayed properly

问题描述

我被这个问题困扰了一段时间，似乎找不到答案，所以我决定直接问.

I've been stuck with this problem for some time, and can't seem to find an answer, so I decided to ask straight.

我正在使用 Flexslider 插件在一个网站上显示多个图像，但是，悬停图像时显示的箭头导航已关闭.箭头在顶部被切断，它下面应该完全隐藏的文本部分显示.这是问题的屏幕截图:

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:

我尝试修改 CSS，但我就是想不通.谁能帮帮我?

I tried tinkering with the CSS, but I just can't figure it out. Could anyone please help me?

推荐答案

Remove overflow: hidden; from .flex-direction-nav a:

Remove overflow: hidden; from .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; 
}

如果您需要更改或删除上一个"和下一个"默认显示的文本，请在此处查阅插件的选项文档根据您的需要定制":http://www.woothemes.com/flexslider/

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/

之后，只需更新以下设置:

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

这篇关于Flexslider 箭头未正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！