create Infinite Carousel using jQuery

0 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.

This 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 default will be the overflow is visible, and we’ll use JavaScript to change the element to overflow: hidden.


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:

  1. Markup that works without JavaScript.
  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
You might also like

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More