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
getElementForItem() API to get the reference to the Carousel's item (an
li element in
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.
Note: Logging and debugging is currently turned off for this example.