A Look at the New YUI Carousel Control

The Yahoo! User Interface library continues to grow and expand with new components being added and existing components being continually patched and updated to ensure full x-browser support and cutting-edge functionality. Version 3 of the YUI is due for full release at some point this year, but version 2 (current release 2.6) is at this point still the stable and recommended release for general use.

TABLE OF CONTENTS:

By: Dan Wellman

Poor Best

Rating:

/ 15

April 13, 2009

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

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.

Getting Started

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">

<html>

<head>

<title>YUI Carousel Example 1</title>

</head>

<ol>

</ol>

</div>

//create carousel control

var carousel = new YAHOO.widget.Carousel("scientists");

//render to page

carousel.render();

//display

carousel.show();

</script>

</body>

</html>

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.

Next: Enhancing the Page >>