How to Create an Infinite Carousel with jQuery

[ivGeo Bot]

jQueryforDesigners has added a scrolling carousel that worked in the same way the carousel worked on the Apple Mac ads page. They have published a tutorial which walk through the fundamentals of scrolling carousel, and how they have created jQuery Infinite Carousel.

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

Requirements: jQuery Framework
Demo: http://jqueryfordesigners.com/demo/infin...ousel.html
License: License Free

Related Posts

• How to Create Digg Spy Effect with jQuery
• Nice and Easy to Implement News Scrolling Tickers
• Accessible News Slider Plugin Built for jQuery
• Coda Style Popup Bubble Tooltips with jQuery
• Scroll Your HTML Elements with jQuery Scrollable

<!-- Similar Posts took 9.720 ms -->

Sponsors

Dreamhost: Get $50 Off with Coupon Code: WEBAPPERS

Posted on Tue, 16 Jun 2009 07:01:23 +0000 at http://feedproxy.google.com/~r/Webappers...hvgRoZkX8/
Comments: http://www.webappers.com/2009/06/16/how-.../#comments