YUI Library Home

Site Search (YDN & YUIBlog):

# 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.

View example in new window.

## 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:

<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.8.2r1/build/carousel/assets/skins/sam/carousel.css"> <script src="http://yui.yahooapis.com/2.8.2r1/build/yahoo/yahoo-dom-event.js"></script> <script src="http://yui.yahooapis.com/2.8.2r1/build/element/element-min.js"></script> <script src="http://yui.yahooapis.com/2.8.2r1/build/carousel/carousel-min.js"></script> <script src="http://yui.yahooapis.com/2.8.2r1/build/paginator/paginator-min.js"></script>

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

<div id="container"> <ol> <li> <img src="http://farm1.static.flickr.com/135/342099636_7b05b7cde5_s.jpg"> </li> <li> <img src="http://farm1.static.flickr.com/136/342099938_fdef3ca3b5_s.jpg"> </li> <li> <img src="http://farm1.static.flickr.com/147/342099522_3827eaa929_s.jpg"> </li> <li> <img src="http://farm1.static.flickr.com/143/342100011_ec4d338c71_s.jpg"> </li> <li> <img src="http://farm1.static.flickr.com/161/342100080_0fe4f9ccb0_s.jpg"> </li> <li> <img src="http://farm1.static.flickr.com/153/342100324_82589c0ebe_s.jpg"> </li> <li> <img src="http://farm1.static.flickr.com/147/342100376_d0336252a7_s.jpg"> </li> <li> <img src="http://farm1.static.flickr.com/156/342100472_b9bc985fa4_s.jpg"> </li> <li> <img src="http://farm1.static.flickr.com/133/342100566_39dae4698f_s.jpg"> </li> </ol> </div>

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

<div id="pagination"></div>

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

<div id="spotlight"></div>

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.

.yui-carousel-element li { height: 75px; width: 75px; }

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

#pagination { font: 13px Arial, Helvetica, sans-serif; margin: 10px auto; padding: 1px; text-align: center; width: 240px; } .yui-skin-sam .yui-pg-page { background: #fff; border: 1px solid #cbcbcb; margin: 0 1px; padding: 2px 6px; }

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.

.yui-carousel-nav { display: none; } #container { border: none; background: #e2edfa; -moz-border-radius: 6px; padding: 8px 16px 4px; }

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.

YAHOO.util.Event.onDOMReady(function (ev) { var carousel = new YAHOO.widget.Carousel("container"); var numItems = carousel.get("numItems"); var numVisible = carousel.get("numVisible"); var paginator = new YAHOO.widget.Paginator({ containers: "pagination", rowsPerPage: 1, template: "{PreviousPageLink} {PageLinks} {NextPageLink}", totalRecords: Math.ceil(numItems / numVisible) });

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.

paginator.subscribe("changeRequest", function (state) { // set the selectedItem so that the Carousel scrolls to the page automatically carousel.set("selectedItem", (state.page - 1) * numVisible); paginator.setState(state); });

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.

carousel.on("pageChange", function (page) { // Paginator's page begins from 1 // Also, we need to suppress this triggering a changeRequest event. paginator.setPage(page + 1, true); });

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).

carousel.on("itemSelected", function (index) { // item has the reference to the Carousel's item var item = carousel.getElementForItem(index); });

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

// Get the image link from within its (parent) container. function getImage(parent) { var el = parent.firstChild; while (el) { // walk through till as long as there's an element if (el.nodeName.toUpperCase() == "IMG") { // found an image // flickr uses "_s" suffix for small, and "_m" for big images respectively return el.src.replace(/_s\.jpg$/, "_m.jpg"); } el = el.nextSibling; } return "";

Finally render both the controls.

carousel.render(); carousel.show(); paginator.render();

## 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.

### YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

### Carousel Control Examples:

- Spotlight example
- Circular Carousel example
- Partially revealing previous and next items
- Using both images and text within an item
- Using Ajax for deferred loading of items
- Using deferred loading of items and Carousel's built-in paginator
- Multi-row example
- Pagination template example
- Using Paginator with Carousel
- Using the Carousel ARIA Plugin

### More Carousel Control Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2010 Yahoo! Inc. All rights reserved.

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