YUI Library Examples: Carousel Control: Partially revealing previous and next items

Using the Carousel Widget While Partially Revealing Previous and Next Items

Here we will use the YUI Carousel Control's revealAmount configuration setting to reveal the previous and next items partially.

This example has the following dependencies:


1	<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.7.0/build/carousel/assets/skins/sam/carousel.css">
2	<script src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-dom-event.js"></script>
3	<script src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script>
4	<script src="http://yui.yahooapis.com/2.7.0/build/carousel/carousel-min.js"></script>
	view plain \| print \| ?

This example uses progressive enhancement; the Carousel is built from an existing ordered list.


1	<div id="container">
2	<ol>
3	<li>
4	<img src="http://farm1.static.flickr.com/32/52955391_e7bed4c41f_m.jpg"
5	height="180" width="240">
6	</li>
7	<li>
8	<img src="http://farm1.static.flickr.com/28/52955478_0a35209bbb_m.jpg"
9	height="180" width="240">
10	</li>
11	<li>
12	<img src="http://farm1.static.flickr.com/26/52955086_df2cdece3d_m.jpg"
13	height="180" width="240">
14	</li>
15	<li>
16	<img src="http://farm1.static.flickr.com/24/52956234_809467624f_m.jpg"
17	height="180" width="240">
18	</li>
19	<li>
20	<img src="http://farm1.static.flickr.com/30/52954770_ef743b4afe_m.jpg"
21	height="180" width="240">
22	</li>
23	<li>
24	<img src="http://farm1.static.flickr.com/33/52953744_1c4a4ffaaf_m.jpg"
25	height="180" width="240">
26	</li>
27	<li>
28	<img src="http://farm1.static.flickr.com/26/52953668_33ea00edac_m.jpg"
29	height="180" width="240">
30	</li>
31	<li>
32	<img src="http://farm1.static.flickr.com/32/52953229_28f32b92a1_m.jpg"
33	height="180" width="240">
34	</li>
35	<li>
36	<img src="http://farm1.static.flickr.com/32/52953161_9e067407b2_m.jpg"
37	height="180" width="240">
38	</li>
39	<li>
40	<img src="http://farm1.static.flickr.com/32/52953399_047d25504b_m.jpg"
41	height="180" width="240">
42	</li>
43	</ol>
44	</div>
	view plain \| print \| ?

We have only one CSS rule to set the height for the Carousel items.

Since we have the elements in place, we can invoke the Carousel's constructor with the revealAmount configuration to create the widget.


1	YAHOO.util.Event.onDOMReady(function (ev) {
2	var carousel = new YAHOO.widget.Carousel("container", {
3	revealAmount: 25
4	});
5	carousel.render(); // get ready for rendering the widget
6	carousel.show(); // display the widget
7	}
	view plain \| print \| ?