One of the components recently added is the Carousel component, a control for automatically scrolling content in an attractive and intuitive interface. Itís still a beta release at present ,which indicates that the API is not finalized and that there are likely to be bugs that need addressing. We can still use the component, though, and although we should be wary as the existing API may change, the full release will probably bring more new functionality than changes in how it is implemented.
In this tutorial weíll be looking at a basic implementation of the control, the functionality we can use at this point in time, and the properties and methods exposed by the current API. I should point out that the examples used in this article have been thoroughly tested in todayís most common browser, but only on the Windows platform. The examples should work on other platforms, but the control or functionality may manifest itself slightly differently. You can examine the source files separately at the link, as well as check out a separate image file.
Letís have a look at the default control first, and by this I mean the most basic, least configured implementation possible, the barest minimum we can code and still derive a usable widget from. In your text editor of choice create the following page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/carousel/assets/skins/sam/carousel.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>YUI Carousel Example 1</title>
<li><img src="img/scientists/bohr_thumb.jpg" alt="Niels Bohr"></li>
<li><img src="img/scientists/darwin_thumb.jpg" alt="Charles Darwin"></li>
<li><img src="img/scientists/einstein_thumb.jpg" alt="Albert Einstein"></li>
<li><img src="img/scientists/galileo_thumb.jpg" alt="Galileo Galilei"></li>
<li><img src="img/scientists/newton_thumb.jpg" alt="Isaac Newton"></li>
<li><img src="img/scientists/maxwell_thumb.jpg" alt="James Clerk Maxwell"></li>
//create carousel control
var carousel = new YAHOO.widget.Carousel("scientists");
//render to page
Save this file as carousel1.html. Letís review what weíve got; in the <head> we link to the skin file for the carousel component provided by Yahoo. This gives the carousel its default appearance and styles the elements that get added to the page automatically.
On the page we have a container element that holds a simple ordered list with six list items. Each item contains an image. The images used in this example are all included in the download (the images file) for this article; use them, or use images of your own, it shouldnít make a difference. If you want to use your own images, make sure they are all of the same dimensions.
At the end of the document (just before the closing </body> tag) we link to the script resources required by this component and then provide our own custom <script> element, which is used to create the carousel.
First we call the constructor method, which invokes the control. The constructor takes a single argument, which is a string matching the id of the carouselís container element. We then render the control using its render method, which creates it but doesnít show it. Finally we call the show method, which does actually show it. When you run this file in your browser, you should see something like this:
In the default implementation a number of elements are created automatically by the widget, including the UI at the top for navigating between pages. Here we have a visual indicator of which page is selected, and also two arrows for navigating the pages. Both the page highlighter and buttons can be used to navigate the carousel pages. All of this behavior is built in and automatic, and everything should be fully functional.
blog comments powered by Disqus