WebAppers

/ best free open source web resources /

Shopify

How to Create an Infinite Carousel with jQuery

Posted · Category: Gallery, License Free

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.

infinite carousel

Requirements: jQuery Framework
Demo: http://jqueryfordesigners.com/demo/infinite-carousel.html
License: License Free

3 Comments
  • http://www.russback.com Russ Back

    You can also achieve this with the jQuery Cycle plugin (http://malsup.com/jquery/cycle/), which has support for all sorts of effects and transitions and is one of the most flexible plugins I’ve used.

  • Pingback: links for 2009-06-17 « Giri’s Blogmarks

  • xiaoqian

    OMG,It doesn’t support IE?????? It makes me crazy!!!!!!! This is the first jquery app that doesn’t support IE I’ve met in my whole life!!!!!!!!

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons