HTML

		<h3>Resize your browser.</h3>
		<div id="wrapper">
			<div id="carousel">
				<img src="img/dakar-1.jpg" alt="dakar-1" width="250" height="150" />
				<img src="img/dakar-2.jpg" alt="dakar-2" width="250" height="150" />
				<img src="img/dakar-3.jpg" alt="dakar-3" width="100" height="150" />
				<img src="img/dakar-4.jpg" alt="dakar-4" width="250" height="150" />
				<img src="img/dakar-5.jpg" alt="dakar-5" width="250" height="150" />
				<img src="img/dakar-6.jpg" alt="dakar-6" width="100" height="150" />
				<img src="img/dakar-7.jpg" alt="dakar-7" width="250" height="150" />
				<img src="img/dakar-8.jpg" alt="dakar-8" width="250" height="150" />
				<img src="img/dakar-9.jpg" alt="dakar-9" width="250" height="150" />
				<img src="img/dakar-10.jpg" alt="dakar-10" width="250" height="150" />
				<img src="img/dakar-11.jpg" alt="dakar-11" width="250" height="150" />
				<img src="img/dakar-12.jpg" alt="dakar-12" width="100" height="150" />
				<img src="img/dakar-13.jpg" alt="dakar-13" width="250" height="150" />
				<img src="img/dakar-14.jpg" alt="dakar-14" width="250" height="150" />
				<img src="img/dakar-15.jpg" alt="dakar-15" width="100" height="150" />
			</div>
		</div>
		<a id="prev" href="#"></a>
		<a id="next" href="#"></a>
	

JavaScript

			$(function() {

				$('#carousel').carouFredSel({
					width: '100%',
					auto: {
						items: 1
					},
					prev: '#prev',
					next: '#next'
				});

			});
		

CSS

			html, body {
				height: 100%;
				padding: 0;
				margin: 0;
			}
			body {
				position: relative;
			}
			body h3 {
				font-family: Arial, Geneva, SunSans-Regular, sans-serif;
				font-size: 20px;
				text-align: center;
				color: #999;
				margin: 0;
				padding-top: 50px;
			}
			#wrapper, #prev, #next {
				border-top: 1px solid #999;
				border-bottom: 1px solid #999;
				height: 170px;
				position: absolute;
				top: 50%;
				margin-top: -85px;
			}
			#wrapper {
				width: 90%;
				left: 5%;
				overflow: hidden;
				box-shadow: 0 0 10px #ccc;
			}

			#carousel img {
				margin: 10px 5px;
				border: none;
				display: block;
				float: left;
			}
			
			#prev, #next {
				background: center center no-repeat #ccc;
				width: 5%;
			}
			#prev:hover, #next:hover {
				background-color: #bbb;
			}
			#prev {
				background-image: url( img/gui-prev.png );
				left: 0;
			}
			#next {
				background-image: url( img/gui-next.png );
				right: 0;
			}