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.

Carousel

Posted by Dion Almaer at 8:36 am
8 Comments

++++-
4.1 rating from 115 votes

8 Comments »

Comments feed TrackBack URI

[…] 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 […]

Pingback by Sam’s random musings » YUI: The Carousel component — July 14, 2006

Looks nice. Would be cool to have a loading indicator on the ajax version.

Comment by Patrick Fitzgerald — July 14, 2006

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.

Comment by Michael Mahemoff — July 14, 2006

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!

Comment by Jason — July 14, 2006

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

Comment by Bill Scott — July 14, 2006

[…] Ajaxian » Y! UI Carousel Component (tags: javascript ajax yahoo yui) […]

Pingback by willkoca » Archive » links for 2006-07-21 — July 24, 2006

Very nice component ! Java developpers, look at this API permitting to integrate the Y! UI Carousel component to the GWT framework : GWT-YUI-Carousel.

Comment by Nicolas HOPPENOT — September 2, 2007

Hi Everyone,

YUI Carousel 2.8 is now available with the following enhancements:

Added multi-row support.
Added pagination template support.
Added support for reverse lazy loading of items.
Added new methods replaceItem(), replaceItems().
Added anchor support for pager/pagination buttons (for SEO).

New Examples:
http://developer.yahoo.com/yui/examples/carousel/index.html

Landing Page:
http://developer.yahoo.com/yui/carousel/

Let us know what you think.

Comment by andresn — September 25, 2009

Leave a comment

You must be logged in to post a comment.