how to replace Nivo slider "prev" & "next" with images(arrows)

slider nivo-slider

user2236577 · Apr 2, 2013 · Viewed 11k times · Source

I am using Nivo slider...

I have managed to hide the numbers from the bottom of the slider using css.

what I want to do now is replace the "prev" & "next" with arrows that I have made in photoshop... I have been searching on here and on google but I am not able to find a solution.

I would really appreciate if anybody could help please.

Sandeep

Answer

I'd use CSS image replacement for this. So:

.nivo-directionNav .nivo-prevNav {
  background:transparent url(path/to/image) 0 0 no-repeat;
  height:20px; /*height of img*/
  width:10px; /*width of img*/
  text-indent:-10000px; /*moving the default text*/
  overflow:hidden; /*hiding the default text*/
}

Then repeat for .nivo-nextNav. You can also use positioning to put the arrows where you want them in the slideshow.

how to replace Nivo slider "prev" & "next" with images(arrows)

Answer

Related questions