Flexslider direction navigation is not showing

Question

I am currently working for a site with a flexslider issue.

The issue here is that by default, the slider navigation must appear when the slider starts the transition.

I overwrite the flexslider code to :

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

but still don't understand what the reason for the navigations not to work.

The default styles of the ul where the direction nav links is located is hidden by default.

The default markup of ul of the working slider:

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

The default styles of ul:

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

Any help would be greatly appreciated.

Answer 1

Try this

.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

The issue is that opacity is initially set to zero. Change it to 1 and it will show up (or anything between 0 and 1).

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

Answer 3

I got the arrows showing on mouse rollover by adding the following to my css:

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

I also added the following to my flexsider parameters to hide the Prev/Next words from showing:

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

Note: This is for Flexslider v2.2

Answer 4

There's also a hover state. This here worked for me.

Inital styles:

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

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

New:

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

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