Woothemes Flexslider 2 缺少方向导航按钮答案

【问题标题】：Woothemes Flexslider 2 missing direction nav buttonsWoothemes Flexslider 2 缺少方向导航按钮
【发布时间】：2013-04-20 23:56:40
【问题描述】：

我一直在尝试寻找有关 flexslider v2.0 的“不可见导航功能”的答案，但我在网上找不到任何可以回答我确切问题的答案。也许是因为将基本滑块添加到您的页面应该是不费吹灰之力。 =/

无论如何，我希望有人能解释为什么我的滑块没有显示“下一个”和“上一个”控件的原因。

我已按照 woothemes 提供的三个步骤进行操作，并将 bg_direction_nav.png 文件添加到我的“图像”文件夹中。

奇怪的是，当我将鼠标悬停在控件应位于的区域上时，我可以单击并在图像之间切换，因此我知道它存在，只是不可见。

这是css：

.flex-direction-nav {*height: 0;}
.flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url(images/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 1; -webkit-transition: all .3s ease;}
.flex-direction-nav .flex-next {background-position: 100% 0; right: -36px; }
.flex-direction-nav .flex-prev {left: -36px;}
.flexslider:hover .flex-next {opacity: 1 !important; right: 5px;}
.flexslider:hover .flex-prev {opacity: 1 !important; left: 5px;}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
.flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}

如果我应该提供其他任何东西，请告诉我。

【问题讨论】：

标签： jquery flexslider nav woothemes

【解决方案1】：

同样的问题。发现他们已经用字体文件替换了图形 .png。 Soooo，将下载中包含的字体目录复制到您的服务器上。在 CSS 中重新映射路径。我必须将 '/' 添加到 src:url('fonts/flexslider-icon.eot');在 'fonts...' 之前所以这个： src:url('/fonts/flexslider-icon.eot');现在就像一个魅力。

【讨论】：

【解决方案2】：

调用JS的时候试试directionNav: true

$('#mainslider').flexslider({  
 directionNav: true
});

【讨论】：