This example uses the YUI Carousel Control to showcase an example where each (list) item contains an image and some text. As always, you can use arrow keys to select items or to click on an item to select it.
Also in this example, you will see the animation capabilities available in
the YUI Carousel Control. For getting an animated effect during scroll, you
will have to set the
animation configuration setting in the constructor and include the YUI Animation Utility on the page.
This example has the following dependencies:
This example uses progressive enhancement, creating the control from an ordered list.
Apart from setting the height of the Carousel, we have a few additional CSS rules for this example to position the text and the images within the Carousel items.
Since we have the elements in place, we can now invoke the Carousel's
constructor to create the widget. We'll pass an additional argument to the
constructor to set the animation speed. The
setting is an object that takes the animation speed (to scroll) in seconds and
the animation effect.
All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.