5

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!

jsavage980
  • 125
  • 2
  • 4
  • 17
  • 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. – jsavage980 Aug 05 '11 at 16:18

4 Answers4

11

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;

Baxny
  • 576
  • 7
  • 12
6

Right way is;

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

$('#slider').nivoSlider({directionNavHide:false});
tolginho
  • 583
  • 9
  • 12
4

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.

Chris
  • 56
  • 1
  • 3
2

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.

nefilas
  • 21
  • 2