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>
- This page was last modified 23:12, 14 November 2008.