Flexslider 箭头未正确显示

Posted 2023-04-13

【中文标题】Flexslider 箭头未正确显示

【英文标题】：Flexslider arrows not displayed properly

【发布时间】：2013-11-18 00:23:03

【问题描述】：

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

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

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

【参考方案1】：

也可以加line-height解决：

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

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

【参考方案2】：

从.flex-direction-nav a 中删除overflow: hidden;：

.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

【讨论】：

这可行，但同时显示箭头和文本。我只想显示箭头并隐藏文本..

您有权访问标记吗？文本以 html 呈现，因此您可以在源代码中将其删除。

文本是通过jQuery添加的。我是 jQuery 新手，所以我不知道该怎么做。但我认为它应该在那里，只是隐藏起来。基本上，我只需要以某种方式将箭头向下移动一点。但找不到方法。我最初的想法是使用当前设置为 -20px 的边距，但它只会移动整个导航..

我认为您需要在脚本中找到应用该文本的点并将其删除。对此的替代方案是事后运行 JS hack。使用 CSS 将文本移出屏幕的一种方法是使用：'text-indent: -9999px;'但在这种情况下，这也会移动箭头。我只需打开插件代码并搜索字符串“下一个”和“上一个”，然后删除。

我确实这样做了，但似乎文本本身被用于插件的功能..

【参考方案3】：

我设法通过更改 flexslider CSS 中“flexslider-icon”的字体大小（在 flexslider.css 中的第 70 行左右）使其正常工作。

它似乎默认设置为 40px，但将其更改为 30px 在我正在构建的两个网站上效果很好。

【参考方案4】：

打开您的“jquery.flexslider.js”文件并在第 1125 行搜索 "// Primary Controls"（大约）。你会发现，

// Primary Controls
controlNav: true,
directionNav: true,
prevText: "Previous",
nextText: "Next", 

这里，你需要删除下一个和上一个文本，并再次保存。

希望这会有所帮助。

【参考方案5】：

只需添加

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

这会覆盖默认的 css

【参考方案6】：

箭头是一种字体，对于它的容器来说太大了。

只需添加此 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);

将此添加到您的 CSS 中，它将覆盖 flexslider 的默认设置