jQuery Infinite Carousel

With jQuery for Designer’s redesign I decided to add a scrolling carousel that worked in the same way the carousel worked on the Apple Mac ads page.

This tutorial will walk through the fundamentals of the effect and how to recreate it.

This is a reasonably advanced effect so we need to plan carefully what we’re trying to achieve:

1. Markup that works without JavaScript (done!)
2. Initialisation & capture the height and width of the first carousel item (required for calculations)
3. Create empty list items to pad to fill every page
4. Generate cloned items on the start and end of the list
5. Adjust the scroll left position to show the real first item
6. Create goto method that supports forward and backwards
7. Generate the next/prev links & bind goto calls