Question

I’m currently coding a jQuery slideshow effect and need a bit of help.
I have all of the sideshow functionality working properly, my only problem is that I want to have my navigation arrows to be automatically positioned on either side of the slideshow box (960px, centered on the screen).

The end product should be something like Kriesi does here: http://www.kriesi.at/themes/upscale/

I’ve looked at his code, but can’t quite figure it out. Any help would be appreciated!

Thanks!

Answer 1

I don’t understand what you mean by “I can’t quite figure out how to initially position them over the slideshow… If I do it in CSS, then it won’t work on all screen resolutions.”…?

If you position the arrows relative to the slideshow, there will be no issue. For example to place them at the top left and top right corners, include the following in your styles:

#slideshowcontainer{
   width: 960px; 
   height: 400px;
   position: relative;
}
#leftarrow{
   position: absolute;
   top: 0px;
   left: -40px; /* position the arrow 40px to the left of the slideshow */
}
#rightarrow{
   position: absolute;
   top: 0px;
   right: -40px; /* position the arrow 40px to the right of the slideshow */
}

Obviously you will need to adjust the values to suit, depending on the size of your arrows and where you want them etc