YUI Library Home

YUI Library Examples: Carousel Control: Using Paginator with Carousel

Carousel Control: Using Paginator with Carousel

This example demonstrates the use of YUI Paginator Control for navigating the YUI Carousel Control.

Using the Pagination Control as the navigation for the Carousel Control

In this example we'll use the YUI Paginator Control for navigating through the YUI Carousel Control.

This example has the following dependencies:

This example uses progressive enhancement; the Carousel is created from an ordered list. This is not a requirement.

We will add a container element where the YUI Paginator Control would place its navigation controls.

We will add a container element where the spotlight image is displayed.

We'll have to set the dimensions of a single item in the Carousel to make it adjust the container width automatically based on the number of items to be displayed in the view port.

Along with the above CSS rule, we'll add some more CSS rules to style the Paginator control.

Since we are using the Paginator control for the navigation, we can hide the Carousel control's navigation. In addition to this, we can style the Carousel container to look pretty.

Since we have the elements in place, we can invoke the Carousel's constructor to create the widget. Once the Carousel is instantiated, we can get the total number of records (items) to be used to instantiate the Paginator.

On clicking any of the pagination links, the Paginator control fires a changeRequest event. We can subscribe to this event to navigate to the appropriate page in the Carousel.

Similarly, when the user scrolls through the Carousel using a keyboard (by hitting the arrow keys), whenever the Carousel scrolls to a new page it triggers a pageChange event. This event needs to be listened to set the Paginator to the correct state on such an event.

Now, we can subscribe to the itemSelected event that the Carousel exposes. This event is triggered whenever an item is selected and it returns the index of the selected item. With the index of the item, we can use the Carousel's getElementForItem() API to get the reference to the Carousel's item (an li element in our case).

Once the reference to the Carousel's item is obtained, it is straightforward to implement a function that extracts the image within it.

Finally render both the controls.

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

Copyright © 2011 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings