Javascript Carousel with Yahoo Yui 2.X

Yui is an extraordinary library with an impressive set of utilities. For one of our project we had to develop an animated carousel with some simple features. One of the Yui’s utilities is the carousel. This utilities (in beta) wasn’t able to make the rendering we want. We searched on the web and found a great one. After some tests with this two components we thinks that it will be much easier to develop our own carousel componet with the inspirations of this previus development.

So here we go! To use this carousel we need YUI utilities and container.

<script src="http://yui.yahooapis.com/combo?2.6.0/build/utilities/utilities.js&amp;2.6.0/build/container/container_core-min.js" type="text/javascript"></script>

For the structure of the carousel, it’s quite similar to Bill Scott carousel

<div id="carousel" class="carouselCss">
	<img class="carousel-prev" src="images/fleche-gauche.png" alt="Previous Button" />
	<img class="carousel-next" src="images/fleche-droite.png" alt="Next Button" />
<div class="carousel-region">
<ul class="carousel-list">
	<li><a href="http://static.flickr.com/3094/2690129022_5c855274b1_m.jpg"><img src="http://static.flickr.com/3094/2690129022_5c855274b1_s.jpg" alt="" />Ducati 1</a></li>
	<li><a href="http://static.flickr.com/1358/1243480131_4f09c7d5f1_m.jpg"><img src="http://static.flickr.com/1358/1243480131_4f09c7d5f1_s.jpg" alt="" />Ducati 2</a></li>
	<li><a href="http://static.flickr.com/160/371320508_e8ed56e9a0_m.jpg"><img src="http://static.flickr.com/160/371320508_e8ed56e9a0_s.jpg" alt="" />Ducati 3</a></li>
	<li><a href="http://static.flickr.com/44/159272697_66465c97fb_m.jpg"><img src="http://static.flickr.com/44/159272697_66465c97fb_s.jpg" alt="" />Ducati 4</a></li>
	<li><a href="http://static.flickr.com/64/159220583_57449b5041_m.jpg"><img src="http://static.flickr.com/64/159220583_57449b5041_s.jpg" alt="" />Ducati 5</a></li>
	<li><a href="http://static.flickr.com/32/42953747_d0e9207270_m.jpg"><img src="http://static.flickr.com/32/42953747_d0e9207270_s.jpg" alt="" />Ducati 6</a></li>
	<li><a href="http://static.flickr.com/2393/2221413634_81d553c62b_m.jpg"><img src="http://static.flickr.com/2393/2221413634_81d553c62b_s.jpg" alt="" />Ducati 7</a></li>
	<li><a href="http://static.flickr.com/3270/2536169010_382e30a8e6_m.jpg"><img src="http://static.flickr.com/3270/2536169010_382e30a8e6_s.jpg" alt="" />Ducati 8</a></li>
</ul>
</div>
</div>

The last thing is to simply declare a new carousel object with an configuration object

Event.onAvailable("carousel", function(){
	var myCarousel = new YAHOO.mmp.Carousel("carousel", {
		width:"600px",
		height:"200px",
		picture:["75", "75"], 
		picturezoom:["150", "150"],
		picturespacer:10,
		pictureborder:5, 
		picturebordercolor:"#cccccc"
	});		
});

After the page loading you will see a simple calendar like this one :

Here is a list of this carousel feature :
- simple construction in HTML
- infinite elements in carousel
- infinite loop on the carousel’s elements
- auto hide left and right arrow when there isn’t enougth elements in the carousel
- auto zoom on mouseover
- simple configuration

For the configuration :

var myCarousel = new YAHOO.mmp.Carousel("carousel", {
	width:"600px", //width in pixel or percent, default : auto width
	height:"200px", // height in pixel or percent, default : auto height
	picture:["75", "75"], //picture size in pixel [width, height], default : 50, 50
	picturezoom:["150", "150"], //picture size in pixel on mouse over[width, height], default : 75, 75
	picturespacer:10, //space between pictures in pixel, default : 10
	pictureborder:5, //border around picture in pixel, default : 1
	picturebordercolor:"#cccccc" //border color, default : #ffffff
        animduration:0.5, //all animations duration in second, default : 0.5
        easing:YAHOO.util.Easing.easeOut // Animation easing, default : YAHOO.util.Easing.easeOut
	});

You can download the source code and samples here or see examples here.
This carousel has been test successfully on IE 6/7, FF3.X and Safari 3.X

About this entry

You’re currently reading “Javascript Carousel with Yahoo Yui 2.X,” an entry on Make me pulse – Making a better life for web developer since 2006

Published:
01.14.09 / 2pm
Category:
Javascript, Our lab, Xhtml & CSS, YUI team