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