HTML

		<div id="wrapper">
			<div id="carousel">
				<div class="empty"></div>
				<div style="background-color: #cec;">
					<img src="img/bugs.jpg" width="554" height="313" />
					<img src="img/bugs-grey.jpg" width="554" height="313" />
					<span>A Bug's Life</span>
				</div>
				<div style="background-color: #ecc;">
					<img src="img/incred.jpg" width="554" height="313" />
					<img src="img/incred-grey.jpg" width="554" height="313" />
					<span>The Incredibles</span>
				</div>
				<div style="background-color: #cde;">
					<img src="img/monsters.jpg" width="554" height="313" />
					<img src="img/monsters-grey.jpg" width="554" height="313" />
					<span>Monsters, Inc.</span>
				</div>
				<div style="background-color: #eec;">
					<img src="img/rat.jpg" width="554" height="313" />
					<img src="img/rat-grey.jpg" width="554" height="313" />
					<span>Ratatouille</span>
				</div>
				<div style="background-color: #ced;">
					<img src="img/toystory.jpg" width="554" height="313" />
					<img src="img/toystory-grey.jpg" width="554" height="313" />
					<span>Toy Story</span>
				</div>
				<div style="background-color: #cce;">
					<img src="img/walle.jpg" width="554" height="313" />
					<img src="img/walle-grey.jpg" width="554" height="313" />
					<span>WALL-E</span>
				</div>
				<div class="empty"></div>
			</div>
			<a id="prev" href="#"></a>
			<a id="next" href="#"></a>
		</div>
	

JavaScript

			function openItem( $item ) {
				$item.find( 'img[src*="-grey"]' ).stop().fadeTo( 1500, 0 );
				$item.addClass( 'selected' );
				$item.stop().animate({
					height: 363
				});
				$('body').css( 'backgroundColor', $item.css( 'backgroundColor' ) );
			}

			$(function() {
				$('#carousel').carouFredSel({
					circular: false,
					infinite: false,
					width: '100%',
					height: 405,
					items: 3,
					auto: false,
					prev: '#prev',
					next: '#next',
					scroll: {
						items: 1,
						duration: 1000,
						easing: 'quadratic',
						onBefore: function( oldItems, newItems ) {
							oldItems.find( 'img[src*="-grey"]' ).stop().fadeTo( 500, 1 );
							oldItems.removeClass( 'selected' );
							oldItems.stop().animate({
								height: 313
							});
							$('body').css( 'backgroundColor', '#ddd' );
						},
						onAfter: function( oldItems, newItems ) {
							openItem( newItems.eq( 1 ) );
						}
					},
					onCreate: function( items ) {
						openItem( items.eq( 1 ) );
					}
				});
			});
		

CSS

			html, body {
				height: 100%;
				padding: 0;
				margin: 0;
			}
			body {
				background-color: #ddd;
				min-height: 600px;
				min-width: 990px;
			}
			body * {
				font-family: Arial, Geneva, SunSans-Regular, sans-serif;
				font-size: 14px;
				color: #333;
				line-height: 22px;
			}

			#wrapper {
				width: 100%;
				height: 400px;
				margin: -200px 0 0 0;
				overflow: hidden;
				position: absolute;
				left: 0;
				top: 50%;
			}
			#carousel div {
				width: 554px;
				height: 313px;
				margin: 20px 30px;
				float: left;
				position: relative;
			}
			#carousel div.selected {
				box-shadow: 0 0 10px rgba(0,0,0,0.5);
			}
			#carousel div img {
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 10;
			}
			#carousel div span {
				background-color: #fff;
				color: #999;
				font-size: 24px;
				font-weight: bold;
				line-height: 50px;
				text-align: center;
				display: block;
				width: 100%;
				height: 50px;
				overflow: hidden;
				position: absolute;
				bottom: 0;
				z-index: 8;
			}

			#prev, #next {
				background: center center no-repeat transparent;
				display: block;
				width: 30px;
				height: 30px;
				margin-top: -30px;
				position: absolute;
				top: 50%;
				z-index: 5;
			}
			#prev:hover, #next:hover {
				background-color: rgba(255,255,255,0.5);
				border-radius: 5px;
			}
			#prev.disabled, #next.disabled {
				opacity: 0.2;
				cursor: default;
			}
			#prev.disabled:hover, #next.disabled:hover {
				background-color: transparent;
			}
			#prev {
				background-image: url( img/gui-prev.png );
				left: 50%;
				margin-left: -320px;
			}
			#next {
				background-image: url( img/gui-next.png );
				right: 50%;
				margin-right: -320px;
			}