create Infinite Carousel using jQuery
jqueryfordesigners.com has create a nice scrolling carousel that worked in the same way the carousel worked on the Apple Mac ads page. This tutorial will tell you the fundamentals of the effect and how to create Infinite Carousel using jQuery .
To create a nice scrolling Infinite Carousel you required jQuery Framework . The Real trick is building the DOM with the cloned nodes, because we’ve cloned the start of the list to the end of the list, when we scroll off the last items, it looks like we’ve looped back round. Once the animation completes, we change the scrollLeft position back to the real first items.
scrollLeft isn’t visible to the user since the overflow is hidden, and so it creates the effect of being infinitely sliding from left or right (since it also works the other way around).
The final result is something like this:
Source Code :
To view Source Code visit Here .
Replicating the Effect :
This is a reasonably advanced effect so we need to plan carefully what we’re trying to achieve:
- Initialisation & capture the height and width of the first carousel item (required for calculations)
- Create empty list items to pad to fill every page
- Generate cloned items on the start and end of the list
- Adjust the scroll left position to show the real first item
- Create goto method that supports forward and backwards
- Generate the next/prev links & bind goto calls