Home arrow JavaScript arrow Page 2 - A Look at the New YUI Carousel Control

Enhancing the Page - JavaScript

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.

  1. A Look at the New YUI Carousel Control
  2. Enhancing the Page
  3. Additional Configuration
  4. Working with Carouselís Custom Events
By: Dan Wellman
Rating: starstarstarstarstar / 15
April 13, 2009

print this article



We use no additional CSS of our own in the first example, and while we can happily scroll through the pages containing the images, and select individual images, nothing else really happens. Letís add some additional elements to our page as well as some basic styling. Change carousel1.htmlso that it appears as follows: 

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

<link rel="stylesheet" type="text/css" href="myCarousel.css">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>YUI Carousel Example 2</title>


<body class="yui-skin-sam">

<div id="scientists">

<span id="title">Great Men of Science</span>


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



<div id="information"></div>

<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>

<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script>

<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/carousel/carousel-beta-min.js"></script>

<script type="text/javascript">


//create carousel control

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


//render to page









Save the changes as carousel2.html. We havenít added much; a <span> element to use as the title of the carousel, and a new <div> element which will hold information about each image. We also need some CSS; in a new page in your text editor add the following stylesheet: 

#scientists { margin:0 auto; }

#title {

font-weight:bold; font-size:18px; position:absolute;

top:8px; left:10px;


.yui-carousel .yui-carousel-item-selected, .yui-carousel-element li {

margin:0; width:115px; height:160px;


#information {

width:341px; margin:0 auto; border:1px solid #808080; padding:5px;


#information h2 { margin:0 0 10px 0; }

#information p { margin:0; }

Save this as myCarousel.cssin the same location as the HTML files. There's really nothing worth going into much detail about in this file, except for the third rule; we need to override some of the styling provided by the component, just to tidy up the images a little. As our stylesheet comes after the carousel stylesheet, our style rules will take precedence provided we match or exceed the original specificity. 

If you view the new page in your browser, you should see the title at the top of the widget, and you may be able to tell that the images sit a little better in the carousel. 

>>> More JavaScript Articles          >>> More By Dan Wellman

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- Javascript for Beginners: An Introduction
- Introduction to JavaScript
- Adding Elements to a Tree with TreeView jQue...
- Using the Persist Argument in a TreeView jQu...
- Using Unique and Toggle in a TreeView jQuery...
- Using Event Delegation for Mouseover Events ...
- Using the Animate Option in a Treeview jQuer...
- Using HTML Lists with Event Delegation in Ja...
- Opened and Closed Branches on a TreeView jQu...
- Mouseover Events and Event Delegation in Jav...
- Creating a TreeView JQuery Hierarchical Navi...
- Event Delegation in JavaScript
- A Look at the New YUI Carousel Control
- Working with Draggable Elements and Transpar...
- Displaying Pinned Handles with Resizable Con...

Developer Shed Affiliates


Dev Shed Tutorial Topics: