Flexslider箭头未​​正确显示

Question

我一直坚持这个问题，似乎找不到答案，所以我决定直接问。

我正在使用Flexslider插件在网站上显示多个图像，但是，悬停图像时显示的箭头导航已关闭。箭头在顶部被切掉，其下面的文本被认为是完全隐藏的部分显示。以下是问题的屏幕截图：

我尝试了修补CSS，但我无法理解。有人可以帮帮我吗？

Answer 1

您还可以添加line-height来解决它：

.flex-direction-nav a  {
    line-height: 40px;
}

PS：它似乎是一个Flexslider错误，它在默认设置下无法正常工作。

Answer 2

从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/

然后，只需更新以下设置：

prevText: "Previous",    //String: Set the text for the "previous" directionNav item
nextText: "Next",        //String: Set the text for the "next" directionNav item

Answer 3

我设法通过更改＆＃34; flexslider-icon＆＃34;的字体大小来实现它。在flexslider CSS中（flexslider.css中的第70行）。

默认情况下似乎设置为40px，但将其更改为30px已在我建立的两个网站上完美运行。

Answer 4

打开“jquery.flexslider.js”文件并在第1125行（大约）搜索// Primary Controls controlNav: true, directionNav: true, prevText: "Previous", nextText: "Next", 。你会发现，

        MainActivity.this.finish();

在这里，您需要删除下一个和上一个文本，然后重新保存。

希望这会有所帮助。

Answer 5

添加

.flex-direction-nav li a{
      height:50px; 
}

这会覆盖默认的css