在幻灯片上自动定位箭头

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

Arrows are situated in . That block is positioned as absolute with top value as 50% - 12px (margin-top: -12px);

Then, there is a list which contains images and other data and affect height of it's parent .

So, basically, in the code, when user clicks on an arrow, jQUery probabaly uses outerHeight() to get height of li elements in and then uses animate() to change height of the which affects height of the and that in it's turn smoothly changes position of the arrows.

---

Personally, i think it's a bad designing when arrows change it's position. Very annoying when you have to move mouse up and down every time you want to see the next slide.

Answer 2

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