Flexslider navigation not showing

Question

I am currently working on a site with a flexslider problem.

The problem is that, by default, the slider navigation bar should appear when the slider starts the transition.

I rewrite the flexslider code as follows:

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

but they still don’t understand what is the reason navigation systems do not work.

By default, ul styles that contain navigation direction links are hidden by default.

By default, the layout of the ul working slider is:

<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 ul styles are:

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

Any help would be greatly appreciated.

Answer 1

try it

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

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

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

Note. This is for Flexslider v2.2