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?

推荐答案

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

如果您需要更改或删除默认情况下显示为上一页和下一页，请参阅插件的选项文档您需要的量身定制： 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屋！