Hi,
has anyone ever used nivo slider for images? I'm having an issue with showing the next and prev images for the navigation. It shows the prev image for boh next and prev navigation.
can anyone help please?
+1
A:
If you simply copy/pasted the example code, you will notice that it is asking for one image. This is because it's using an image called a sprite. A sprite is an image that has multiple images on it, which then are positioned via CSS via background-position attribute. You can either create your own sprite image and position it with CSS or you can use two different images.
If you'd like to use two images, simply change the left control's image in the CSS to left.png (assuming you have a left arrow icon) and the right control's image in the CSS to right.png.
jeek
2010-08-25 22:16:48
yes.. it is only one image. however I'm not sure where about in the javascript splits (or reposition the image).. following is the css:.nivo-directionNav a { display:block; position:absolute; top:45%; z-index:99; cursor:pointer; width:30px; height:30px; background:url(../Styles/images/arrows.png) no-repeat; text-indent:-9999px; border:0;}arrows.png has both left and right icons
2010-08-26 00:03:09
Inspecting my copy of nivo, I see there are classes for each arrow: ".nivo-prevNav" and ".nivo-nextNav". Try placing the image backgrounds on those elements instead. ".nivo-directionNav a" is probably just giving similar attributes to both elements to keep things DRY.
jeek
2010-08-26 04:31:56
thanks mate.. u're legend!
2010-08-26 07:36:18
No prob! Just here to help :P
jeek
2010-08-26 17:37:06