Friday, May 11th, 2007

iCarousel: open source carousel

Category: JavaScript, Library

Fabio Zendhi Nagao has created iCarousel, an open source javascript tool for creating carousel like widgets.

It is very flexible, builds on MooTools v1.1, and an example looks like:


  1. new iCarousel("example_3_content", {  
  2.     idPrevious: "example_3_previous",  
  3.     idNext: "example_3_next",  
  4.     idToggle: "undefined",  
  5.     item: {  
  6.         klass: "example_3_item",  
  7.         size: 86  
  8.     },  
  9.     animation: {  
  10.         duration: 1000,  
  11.         amount: 4  
  12.     }  
  13. });


Posted by Dion Almaer at 7:57 am

3.9 rating from 56 votes


Comments feed TrackBack URI

This is quite sweet, I might actually use it! Thanks for posting.

Comment by stu — May 11, 2007

Great, and it´s just 2Kb.

Comment by Kass — May 11, 2007

Very exciting.

Comment by Linuxlookup — May 11, 2007

Cool concept.
However, I noticed they’re not very responsive in IE. Even in firefox, the scrolling is inconsistent. It does not scroll when I click on the left or right arrow. I have to move my mouse further to the edges to get them to scroll.

Comment by nirav — May 11, 2007

Seems to work fine for me, it would be nice if instead of fading, then scrolling, and then unfading, it blended all the effects together. As it is, should I really be looking for something, I would get frustrated pretty quickly while waiting for all of the effects.

Comment by Adam Sanderson — May 11, 2007

This is the same concept as JCarousel which is a jQuery plugin.

Comment by Scott — May 11, 2007

really slow one (WinXP / FF2)

Comment by kangax — May 11, 2007

Hi ajaxians,

First of all, thanks for posting and suggesting enhancements. Let me tell a little about each of the “most complained” topics:

1. IE7 is broken: I found this one is related to the current size of the page, it’s happening because I left everything in a unique document. If I remove the examples code it start working again. So, it will be fixed very soon, I’m just looking a good way to separe the things. Sorry for that “mea culpa”.

2. Delay/Slowness: The duration of transition can be modified. it was using around 1 sec for each effect, so the entire slide should take around 3 sec (really slow, but smooth). I decreased the time to 250 ms and now the effect is really fast.

3. “This is the same concept as JCarousel which is a jQuery plugin.” – by Scott. Answer: Well, I’m really sorry to tell you this but you are completely wrong oO;; This JCarousel doesn’t even deserve the name carousel, since it’s content doesn’t rotate forever. It’s much more like “JListSlider” ’cause it’s built to handle only lists, in other words it’s a lot dependent of this html structure while a smart guy with iCarousel can notice it can handle any type of structure since it’s more CSS dependent. Look closely, I’m not saying mine is better, maybe jCarousel could be better (i’d never see that before), but their nature is completely different. I can’t do anything if SOME of the applied possibilities looks similar.

Comment by nagaozen — May 11, 2007

I implemented iCarousel tonight. It works fairly well, although I still have to tweak some display things. You have to be mindful of the width of your images, the CSS, and the JS parameters. My values aren’t precise, and so the images are a little cut off and you don’t scroll through a whole window of images each time. I think those are my fault and not iCarousel’s fault though.

Comment by Mike — May 13, 2007

And for those who prefer prototype/scriptaculous, there’s Prototype Carousel.

Comment by Andy — May 13, 2007

Looks like the prototype carousel also doesn’t qualify under Fabio’s rules as it doesn’t rotate forever. I’d tend to agree but what to call these fake carousels? Conveyor belts? ;)

Comment by Ross Hendry — May 14, 2007

Hey kangax,
That was just an observation. I didn’t even get a chance to kick the tires or look under the hood. ;-)

Comment by Scott — May 14, 2007

I’d just like to throw in another compliment. I hacked together a carousel a couple of years ago (Didn’t realize that they were so common that there was a term) and it wasn’t anywhere near as smooth as this one. Very very well done, you have my compliments.

Comment by Well Done — May 16, 2007

I am having a problem with using more than one instance of iCarousel in the same page within Firefox 2, XP. After the first cycle, the text begins to overlap.

Any suggestions anyone?


Comment by spen — August 7, 2008

Leave a comment

You must be logged in to post a comment.