YUI Library Home

YUI Library Examples: Carousel Control: Using both images and text within an item

Carousel Control: Using both images and text within an item

This example uses the YUI Carousel Control to showcase an example where each (list) item contains an image and some text. As always, you can use arrow keys to select items or to click on an item to select it.

Also in this example, you will see the animation capabilities available in the YUI Carousel Control. For getting an animated effect during scroll, you will have to set the animation configuration setting in the constructor and include the YUI Animation Utility on the page.

Using the Carousel Widget for displaying items with images and text

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/animation/animation-min.js"></script> 
4<script src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script> 
5<script src="http://yui.yahooapis.com/2.7.0/build/carousel/carousel-min.js"></script> 
view plain | print | ?

This example uses progressive enhancement, creating the control from an ordered list.

1<div id="container"> 
2  <ol id="carousel"> 
3    <li class="intro"> 
4      <a href="/experts/"> 
5        <img width="202" height="162" border="0" 
6             alt="Health Expert Advice: Leading experts share advice, tips and personal experiences." 
7             src="http://l.yimg.com/us.yimg.com/i/us/he/gr/v4/carouselintro.png"/> 
8      </a> 
9    </li> 
10    <li class="item"> 
11      <a title="View Author's Biography" class="authimg" 
12         href="/experts/skintype/bio/leslie-baumann/"> 
13        <img width="125" height="154" border="0" 
14             alt="Leslie Baumann, M.D." 
15             src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/LeslieBaumann_carousel.png"/> 
16      </a> 
17      <h3><a href="/experts/skintype/bio/leslie-baumann/">Leslie Baumann, M.D.</a></h3> 
18      <h4><a href="/experts/skintype/12135/skin-treatments-for-brides-to-be/"> 
19      Skin Treatments for…</a></h4> 
20      <cite>Posted Thu 5.1.08</cite> 
21      <p class="all"><a href="/experts/skintype/">View All Posts »</a></p> 
22    </li> 
23    <li class="item"> 
24      <a title="View Author's Biography" class="authimg" 
25         href="/experts/deepak/bio/deepak-chopra/"> 
26        <img width="125" height="154" border="0" 
27             alt="Deepak Chopra, M.D." 
28             src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/DeepakChopra_carousel.png"/> 
29      </a> 
30      <h3><a href="/experts/deepak/bio/deepak-chopra/">Deepak Chopra, M.D.</a></h3> 
31      <h4><a href="/experts/deepak/2689/how-you-think-about-illness-affects-your-recovery/"> 
32      How You Think About Illness…</a></h4> 
33      <cite>Posted Thu 5.1.08</cite> 
34      <p class="all"><a href="/experts/deepak/">View All Posts »</a></p> 
35    </li> 
36    <li class="item"> 
37      <a title="View Author's Biography" class="authimg" 
38         href="/experts/nutrition/bio/christine-mckinney-nutrition/"> 
39        <img width="125" height="154" border="0" class="lz" 
40          alt="Christine McKinney, M.S., R.D., C.D.E." 
41          src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/ChristineMcKinney_carousel.png"/> 
42      </a> 
43      <h3><a href="/experts/nutrition/bio/christine-mckinney-nutrition/"> 
44      Christine McKinney, M.S., R.D., C.D.E.</a></h3> 
45      <h4><a href="/experts/nutrition/12067/fat-how-much-is-enough-of-a-good-thing/"> 
46      Fat: How Much Is Enough of a…</a></h4> 
47      <cite>Posted Thu 5.1.08</cite> 
48      <p class="all"><a href="/experts/nutrition/">View All Posts »</a></p> 
49    </li> 
50 
51    <snip>...</snip> 
52     
53  </ol> 
54</div> 
view plain | print | ?

Apart from setting the height of the Carousel, we have a few additional CSS rules for this example to position the text and the images within the Carousel items.

1.yui-carousel-element li { 
2    height: 158px; 
3} 
4
5#container { 
6    font-size: 13px; 
7} 
8
9#container a { 
10    text-decoration: none; 
11} 
12
13#container .intro { 
14    display: inline; 
15    float: left; 
16    margin: 0px 14px 0px 4px; 
17    width: 202px; 
18} 
19
20#container .item { 
21    display: inline; 
22    float: left; 
23    margin: 0 22px 0 12px; 
24    overflow: hidden; 
25    padding-right: 80px; 
26    width: 106px; 
27} 
28
29#container .item .authimg { 
30    bottom: 2px; 
31    margin-left: 61px; 
32    position: absolute; 
33    z-index: 1; 
34} 
35
36#container .item h3 { 
37    line-height: 85%; 
38    margin-top: 4px; 
39} 
40
41#container .item h3 a { 
42    font: 77% Arial, sans-serif; 
43    position: relative; 
44    text-transform: uppercase; 
45    z-index: 2; 
46} 
47
48#container .item h3 a:link { 
49    color:#35a235; 
50} 
51
52#container .item h4 { 
53    margin-top:5px; 
54} 
55
56#container .item h4 a { 
57    font: 100% Georgia, Times, serif; 
58    position: relative; 
59    z-index:2; 
60} 
61
62#container .item h4 a:link { 
63    color:#00639b; 
64} 
65
66#container .item cite { 
67    color: #888; 
68    display: block; 
69    font-size: 77%; 
70    line-height: normal; 
71    margin-bottom: 30px; 
72} 
73
74#container .item p.all { 
75    bottom: 25px; 
76    position: absolute; 
77    z-index: 2; 
78} 
79
80#container .item p.all a { 
81    font-weight: bold; 
82    font-size: 85%; 
83} 
view plain | print | ?

Since we have the elements in place, we can now invoke the Carousel's constructor to create the widget. We'll pass an additional argument to the constructor to set the animation speed. The animation configuration setting is an object that takes the animation speed (to scroll) in seconds and the animation effect.

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

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

More Carousel Control Resources:

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings