File Under: JavaScript, Programming
Feb
15
2010

YUI Carousel

By

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