Flexslider方向导航未显示

Question

我目前正在为一个有{flexslider问题的site工作。

此处的问题是默认情况下，滑块开始转换时必须显示滑块导航。

我将flexslider代码覆盖为：

$('#s1.flexslider').flexslider({
    'directionNav':true,
    'controlNav':true
}); 

但仍然不明白导航不起作用的原因。

默认情况下隐藏方向导航链接所在的ul的默认样式。

工作滑块的ul默认标记：

<ul class="flex-direction-nav" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 1; opacity: 0;">
    <li>
        <a class="flex-prev" href="#">Previous</a>
    </li>
    <li>
        <a class="flex-next" href="#">Next</a>
    </li>
</ul>

ul的默认样式：

position: absolute;
top: 0px;
left: 0px;
display: none;
z-index: 1;
opacity: 0;

非常感谢任何帮助。

Answer 1

试试这个

.flex-control-nav {
    background: none repeat scroll 0 0 #FFFFFF;
    bottom: 127px !important;
    display: block !important;
    opacity: 0.66 !important;
    padding: 10px;
    position: absolute;
    text-align: center;
    top: auto !important;
    width: 100%;
    z-index: 999 !important;
}

.flex-direction-nav {
    display: block !important;
    opacity: 1 !important;
    top: 30% !important;
    width: 100%;
    z-index: 999 !important;
}

.flex-direction-nav a {
    color: rgba(0, 0, 0, 0.8);
    cursor: pointer;
    display: block;
    height: 40px;
    margin: 0;
    opacity: 0;
    overflow: hidden;
    padding-top: 8px;
    position: absolute;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
    top: 50%;
    transition: all 0.3s ease 0s;
    width: 40px;
    z-index: 10;
}

Answer 2

问题是不透明度最初设置为零。将其更改为1并显示（或0到1之间的任何内容）。

.flex-direction-nav a.flex-prev { opacity: 1; }
.flex-direction-nav a.flex-next { opacity: 1; }

Answer 3

通过将以下内容添加到我的css中，我得到了鼠标滚动显示的箭头：

.flex-direction-nav {
    display: block;
}

我还在flexsider参数中添加了以下内容，以隐藏显示的上一个/下一个单词：

<script type="text/javascript">
    $(window).load(function () {
        $('.flexslider').flexslider({
            prevText: "",
            nextText: ""
        });
    });
</script>

注意：这适用于Flexslider v2.2

Answer 4

还有一个悬停状态。这对我有用。

初始样式：

.flexslider:hover .flex-direction-nav .flex-prev {
    opacity: 0.7;
    left: 10px;
}

.flexslider:hover .flex-direction-nav .flex-next {
    opacity: 0.7;
    right: 10px;
}

新功能：

.flexslider:hover .flex-direction-nav .flex-prev {
    opacity: 1;
    left: 50px;
}

.flexslider:hover .flex-direction-nav .flex-next {
    opacity: 1;
    right: 50px;
}