Different structure/organization of ImageSlider (jQuery)

Question

I'm about to rewrite some of mycode and re-implement it suited for my current needs. I have basically two requirements:

• posibility to implement preloader
• SEO friendly (show all images at once of no JavaScript)
• changing images with #hash

There are a lot of examples how to do it, but what i would like to ask if what would you say is the best structure of the slider:

1. div with a lot of img's
2. ul with li's, each one with img
3. div with other div's, each with one img

I saw all three implementations, but it's hard to say how these approaches differ, if they differ at all. What do you think, what would you recommend?

Answer 1

Build a window for the slideshow, give it overflow:scroll, but apply overflow:hidden with JS. That way the slides are still available if JS isn't on (rare, I know, but it's the little touches...)

If you want an animated movement as opposed to fades, then adding a container for the slide "rail" can make things a bit easier. If you're just going for fades, you can just fade/unfade them in sequence. Then, depending on the complexity of your slide, If it's just images, use JS to preload them, otherwise you can fill it with divs to hold each "screen" of the slider if your needs are more complex.

<div id="slideshow_window">
    <div id="slide_container">
        <img /><img /> ... repeat
        <!-- or -->
        <div>more complex stuff</div> ... repeat
    </div>
</div>