nivo slider, is a way to always show the next and prev arrows?

Question

I am using nivo slider( default theme) and I positioned the prev and next arrows next to the image(not on top of the image) and I was wondering if there is a way to always show the next and prev arrows(right now the arrows only show when you hover over the image). Seems there should be a way to edit the code to do this but I can't seem to figure out where. Thanks!

Kennie

I actually figured it out..... here's the solution if anyone needs to know how to do this ..... set directionNavHide:true to directionNavHide:false , the code is located in the jquery.nivo.slider.pack.js file near the bottom of the file. – Kennie

Answer 1

open the nivoslider js file and find

{a(".nivo-directionNav",f).hide();f.hover(function(){a(".nivo-directionNav",f).show()},function(){a(".nivo-directionNav",f).hide()}

change to

{a(".nivo-directionNav",f).show();f.hover(function(){a(".nivo-directionNav",f).show()},function(){a(".nivo-directionNav",f).show()}

Save an upload.

Storms

Answer 2

directionHideNav: false doesn't work as of 3.1.

Changes now need to be made in CSS In the theme css file find the line

.theme-default .nivo-directionNav a

Change: opacity: 0; to opacity: 1;

Dewberry

This is what you should do in the latest version (v3.1) – Indrawn

Answer 3

Right way is;

just change or add directionNavHide value and set it to false in nivoSlider settings.

$('#slider').nivoSlider({directionNavHide:false});

Tiannatiara

Answer 4

An easy to do it without touching the JS code is just to add a line in your CSS file:

.nivoSlider .nivo-directionNav{
    display: block !important; /* ALWAYS show the arrows */
}

I'm not a big fan of !important, but if it means I don't have to adjust the js then it works for me.

Disarming