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.
- 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.
- The navigation items are simply hyperlinks to nothing.
- The main container is a “div” element. It can host inline elements and blocklevel elements (the unodered list) and inline elements (the hyperlinks).
<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>