Using Paginator with Carousel
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
#container {
border: none;
background: #e2edfa;
margin: 0 auto;
-moz-border-radius: 6px;
padding: 8px 16px 4px;
}
#spotlight {
border: 1px solid #ccc;
height: 180px;
margin: 10px auto;
padding: 1px;
width: 240px;
}
#pagination {
font: 13px Arial, Helvetica, sans-serif;
margin: 10px auto;
padding: 1px;
text-align: center;
width: 240px;
}
.yui-skin-sam .yui-pg-page {
background: #fff;
border: 1px solid #cbcbcb;
margin: 0 1px;
padding: 2px 6px;
}
.yui-carousel-element li {
opacity: 0.6;
}
.yui-carousel-element .yui-carousel-item-selected {
opacity: 1;
}
.yui-carousel-nav {
display: none;
}
Using Paginator with Carousel
This example demonstrates the use of YUI Paginator Control for navigating the YUI Carousel Control.