NOTE: This blog has been moved to

Thursday, July 06, 2006

Carousel Component - Y! UI Library Example

Ok, so I have been extremely, extremely remiss in writing up what has been rattling around in my brain lately. So I have some pretty good excuses (lots of talks, lots of work, writing for the yui blog, writing various articles, lots of family visiting and so on.) But I have always felt that it was better to share something on this blog when I felt like I had something worthwhile to say (or share.)

So just a week back I took on a weekend 'geek' project. For a project at work we needed a carousel style component. Here is an example:

carousel example

I started on a Friday morning and was essentially finished on Sunday night. Although I will confess that I have tinkered with it on and off over the last week or so.

I think this component is fairly flexible and does a good job of illustrating how to write a component for the Yahoo! User Interface library.

I was going to wait and write up an article explaining how the component is built. But until I can get that post together, I will point you to the component and the documentation I have already put together for it.

It's not finished. Probably has some code that could be refactored and certainly could use improvements. Based on my testing it works on most recent browsers. Let me know if it is useful or if you think an extended article given as a tutorial for the Y!UI library using the carousel component would be helpful.

Check the out the carousel component here.


Sam-I-Am said...

That looks and works pretty nice. It speaks well for the Y!UI toolkit that you can put together something like this in a weekend.
Buffering would be a good feature - loading only the next set or 2 in advance of the user requesting them. In theory you could then hook it up to a limitless data set.. though I wonder what the practical limits are in terms of browser memory management / GC.

Bill Scott said...

Actually I have a simple buffering strategy in the sample apps. In the ajax loading example, I do a simple prefetch (2*numVisible). This coupled with the addItem method (which will only fetch if the item has not already been built, gives a poor man's version.

But you are right. I have thought that a generic buffering/caching utility class would be the right approach. It could be used by this and by Live grid-like technology.

Anonymous said...

Mr. Bill Scott,

Very nice work. I also created a Javascript library that implements the similar functionality using Prototype/scriptaculous. The sample demo is at

The grasses are equally green on both sides :-)

Kevin Hoang Le

Anonymous said...

It would be nice to have a forum to ask questions about implementing carousel...

I certainly have some ;)

Bill Scott said...

Daniel, for now feel free to ping me via email

You can reach me at b dot scott at yahoo dot com (sorry for spelling it out but I hate spammers).

There will be an announcement at some point about providing a full support forum for the carousel.

Anonymous said...

Hi, is the way to get them to appear in a data grid/table(both horizontal and veritcal at the same time) like?

Bill Scott said...

If I understand your question correctly, you are asking how to get a grid of objects scrolling inside a carousel.

One way is for each LIST (LI) item to be rendered with multiple columns of data. For example, you could have an each item in a vertical list have 3 data columns. Then using a vertical scroller it would be like scrolling through a grid.

I don't think the carousel is a replacement for a grid component since you really want to scroll rows in a table, not rows in a list. But it could be done this way if the grid is view only and each row height is the same.

If this is not your question, then please restate what you meant.

Anonymous said...

Thank you so much for sharing your Carousel component. I did alot of research for a carousel object and decided to implement the carousel component you provided. Please have a look and check out the usage on the home page. I used a basic carousel for a picture gallery but was able to implement a second one as the main rotating feature. It turned out really nice. I have received great feedback from everybody about it.