YUI has a built in carousel widget. However, it requires fixed widths for all the parts. That does not fit well in a liquid CSS layout. In particular, we have to support people using large fonts at the OS level and large font settings in their browsers. I did not want for our carousel to break down in these cases. The built in YUI widget does. See this normal sized screen shot versus one with large fonts. Now look at dealnews with normal fonts and large fonts.
We create a container div that has the width we desire. Inside this container, we put our carousel div. It's width is set larger than the container. It should be the number of panels * 100 percent. So, for four panels, 400%. It is set to be absolutely positioned. The container's position is set to relative and its overflow to hidden. It may help to look at the layout without the javascript and without the hidden elements.
To create the carousel effect, we just move the carousel div's left value to lower and higher. This moves it inside its relative parent. We use the YUI Animation library to acheive a smooth transition and cross browser support. The one hiccup in this is what happens when you reach either end of the carousel.
We use a slower animation to move you to the front or to the end. You could instead simply disable the navigation at the ends. The Yahoo front page design released in 2009 features a similar carousel. The technique they use for wrapping is pretty complex, but doable. In short, they move the last or first set to end or beginning as needed and then move all the other elements in the background. I have not tried this yet. I notice some lag on Yahoo's carousel that I did not like. I am not sure if that is because of this technique or not.
A note on height. After each animation, we set the height of the container to the height of the carousel. This is because not all browsers fire a resize event when someone changes their font size. So, we take care of it there. We also attempt to set this height when we create the carousel. However, depending on the content of your carousel, the event may fire before the final height of the carousel is known. For this reason, we set the min-height of the container to the expected normal height via CSS. In reality, most people don't change their font sizes all the time.
The width and layout of the sets and items in the carousel is being done with the grid CSS from Object-Oriented CSS.
Of course, if you are like me, the easiest way to see how it works is to view the source.
Make it: wide | narrow
Back to my blog.