Member Sign In
Not a member?

A Wired.com user account lets you create, edit and comment on Webmonkey articles. You will also be able to contribute to the Wired How-To Wiki and comment on news stories at Wired.com.


It's fast and free.

Sign in with OpenID
Sign In
Webmonkey is a property of Wired Digital.
processing...
Join Webmonkey
Please send me occasional e-mail updates about new features and special offers from Wired/Webmonkey.
Yes No
Please send occasional e-mail offers from Wired/Webmonkey affiliated web sites and publications, and carefully selected companies.
Yes No
I understand and agree that registration on or use of this site constitutes agreement to Webmonkey's User Agreement and Privacy Policy.
Webmonkey is a property of Wired Digital.
processing...

Retrieve Sign In

Please enter your e-mail address or username below. Your username and password will be sent to the e-mail address you provided us.

or
Webmonkey is a property of Wired Digital.
processing...

Welcome to Webmonkey

A private profile page has been created for you.
As a member of Webmonkey, you can now:
  • edit articles
  • add to the code library
  • design and write a tutorial
  • comment on any Webmonkey article
Close
Webmonkey is a property of Wired Digital.

Sign In Information Sent

An e-mail has been sent to the e-mail address registered in this account.
If you cannot find it in your in-box, please check your bulk or junk folders.
Sign In
Webmonkey is a property of Wired Digital.

YUI Carousel

/skill level/
/viewed/
0 Times

This is an example file used in our YUI JavaScript Library tutorial. It produces a window with rotating content, as seen on Yahoo.com's current frontdoor. 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>YUI: Carousel example</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.6.0/build/fonts/fonts-min.css&2.6.0/build/calendar/assets/skins/sam/calendar.css&2.6.0/build/carousel/assets/skins/sam/carousel.css"> 
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/calendar/calendar-min.js&2.6.0/build/element/element-beta-min.js&2.6.0/build/carousel/carousel-beta-min.js"></script>

<script type="text/javascript"> 
function init_carousel()
{
            var carousel = new YAHOO.widget.Carousel("carouselcontainer", { numVisible: 1 }); // Create the carousel object
            carousel.render(); // Let YUI set up its styles
            carousel.show();   // Finally, show the carousel
}
YAHOO.util.Event.onDOMReady(init_carousel);
</script> 
<style>
	ol#carousel li div
	{
		width: 400px;
		padding: 50px 0;
		font-size: 40px;
	}
</style>
</head>
<body class="yui-skin-sam">

    <div id="carouselcontainer">
        <ol id="carousel">
            <li>
            	<div>Monkey</div>
            </li>
            <li>
		<div>Likes</div>
            </li>
            <li>
            	<div>Riding</div>
            </li>
            <li>
            	<div>The</div>
            </li>
            <li>
            	<div>Carousel</div>
            </li>
        </ol>
    </div>


</body>
</html>
Retrieved from "http://www.webmonkey.com/codelibrary/YUI_Carousel"
Edit this article
Reddit Digg
 
Subscribe now

Special Offer For Webmonkey Users

WIRED magazine:
The first word on how technology is changing our world.

Subscribe for just $10 a year