Build a simple semantically valid carousel from scratch (part 1)

In the latest day I wonder how to build a carousel like iTunes coverflow but more simpler. First of all we’ll make a checklist of requirements, second we’ll make a scratch of the carousel, third we’ll analyze each element of the scratch, which is their role in the context and at the end we will develop the jQuery solution.

Requirements and scratches

Our carousel should have 5 visible elements at time: one in the center and other on both sides of central element. The elements would become transparent as they assumes a far position from the center of the carousel. The distant elements, must be smaller than the intermediate elements, which in turn must be smaller than the central element. Starting with the above idea in mind, I made a scratch of the carousel as you can see in the image below. So, we have a main container that encloses our carousel, the item container and two navigation elements placed on both left and right sides of the carousel, inside the main container. Items into the carousel will be classified depending on their current position:

• Current Item is the current visible item in the carousel
• Near Item is the first item near the carousel, placed in the middle of our carousel..
• Far Item is the item at the border of the carousel

At this point is obviously clear how to structure the carousel to make it semantically valid.

1. The carousel is a list of items. Sorted? Unordered? It does not matter, it could matter only if think that the information inside the carousel makes their sense if read sequentially, else we can use an unordered list.
2. The navigation items are simply hyperlinks to nothing.
3. The main container is a “div” element. It can host inline elements and blocklevel elements (the unodered list) and inline elements (the hyperlinks).

I was just thinking about that: But what we need to create by hand? And what not? We will create the main container and the unordered list too, but we will not create the navigation links because they will be produced by javascript.

<div id="my-carousel">
    <ul>
        <li>Item #1</li>
        <li>Item #2</li>
        <li>Item #3</li>
        <li>Item #4</li>
        <li>Item #5</li>
    </ul>
</div>

The above structure, without stylesheet and javascript, will be semantically valid. The next week we will produce the CSS and wetting our hands with jQuery plugin developement. Stay tuned!