Friday, July 14th, 2006
Y! UI Carousel Component
Category: Component
, Toolkit, UI, Yahoo!
Bill Scott of Yahoo! has written up a nice new component on top of the Yahoo! UI library.
The Carousel component lets you flick left and right through content (images).
You will quickly see that there is a lot of documentation and a real API that allows for many uses:
- Static HTML - Carousel content expressed
solely in HTML markup. - DTHML Load - Carousel content loaded via
JavaScript (client side load) displayed horizontally. - DTHML Load (Vertical) - Carousel
content loaded via JavaScript (client side load) displayed horizontally. - Bounded DHTML Load - Loading
Carousel via JavaScript (client side load) with the size constrained. - Ajax Load - Loading Carousel via Ajax (server side load).
- Ajax Load - Two Carousels - Loading two Carousels on same page via Ajax (server side load).
- Slide Show - Showing a carousel managing one large image at a time.
- No Animation - Carousel configured for no animation.
- Module Scrolling - Example of a news module supporting scrolling of content.
- Module Tabset - Example of showing one page of
content at at time in tabs.
4.2 rating from 95 votes
[...] YUI: The Carousel component: The Carousel component lets you flick left and right through content (images). You will quickly see that there is a lot of documentation and a real API that allows for many uses: Static HTML - Carousel content expressed solely in HTML markup. DTHML Load - Carousel content loaded via JavaScript (client side load) displayed horizontally. DTHML Load (Vertical) - Carousel content loaded via JavaScript (client side load) displayed horizontally. Bounded DHTML Load - Loading Carousel via JavaScript (client side load) with the size constrained. Ajax Load - Loading Carousel via Ajax (server side load). Ajax Load - Two Carousels - Loading two Carousels on same page via Ajax (server side load). Slide Show - Showing a carousel managing one large image at a time. No Animation - Carousel configured for no animation. Mod [...]
Looks nice. Would be cool to have a loading indicator on the ajax version.
Nice component. It would be cool to see an option for continuously scrolling too, ticker style, as in http://gizmodo.slide.com/c/Gizmodo.
BTW The direction of the arrows is interesting. I can see why it’s done that way (they point to the content you’re about to see), but there’s a good argument for reversing them. ie If I click on the right arrow, wouldn’t I expect the slides to move in that direction? The current setup seems like a metaphor for the viewer moving along left and right, whereas the display depicts the viewer in a fixed position and the slides moving along.
Michael, I see your point about the arrows, however I think this particular setup is the prevailing convention.
This module is one of the most useful UI constructs out there, and it’s various configurations are all fantiastic. Great work!
Patrick, thanks. I plan on putting an Ajax indicator in there. Really does need it.
Michael, Jason. Yep the convention across the Y! network and other sites is the way I have done it. However, note that the navigation controls are separate from the component. One could drive the carousel with a slider, scrollbar or automated with a timer. I decided to focus on the carousel engine and let everything else be configurable.
Michael, thanks for the pointer to gizmodo, I will work up an example for this as well as a rotating news ticker and a few other ideas I had.
I also plan to add automated scrolling that stops with user interaction, wrapping feature and make the component fully accessible.
Once I get a thorough code review (from people smarter than me ;-) I will publish a yuiblog.com article on building new components with the yui library.
The background on this is at my blog: looksgoodworkswell.com
I created something like this a few months ago built on Dojo but I never got around to making it a widget though I really should.
[...] Ajaxian » Y! UI Carousel Component (tags: javascript ajax yahoo yui) [...]
Very nice component ! Java developpers, look at this API permitting to integrate the Y! UI Carousel component to the GWT framework : GWT-YUI-Carousel.