HTML

		<div id="wrapper">
			<div id="carousel">
				<img src="img/building1.jpg" alt="building1" width="990" height="450" />
				<img src="img/building2.jpg" alt="building2" width="990" height="450" />
				<img src="img/building3.jpg" alt="building3" width="990" height="450" />
				<img src="img/building4.jpg" alt="building4" width="990" height="450" />
				<img src="img/building5.jpg" alt="building5" width="990" height="450" />
				<img src="img/building6.jpg" alt="building6" width="990" height="450" />
			</div>
			<a href="#" id="prev" title="Show previous"> </a>
			<a href="#" id="next" title="Show next"> </a>
		</div>
	

JavaScript

			$(function() {
				$('#carousel').carouFredSel({
					width: '100%',
					items: 3,
					scroll: {
						items: 1,
						duration: 1000,
						pauseDuration: 3000
					},
					prev: '#prev',
					next: '#next'
				});
			});
		

CSS

			html, body {
				height: 100%;
				padding: 0;
				margin: 0;
			}
			body {
				min-height: 600px;
				min-width: 990px;
			}
			body * {
				font-family: Arial, Geneva, SunSans-Regular, sans-serif;
				font-size: 14px;
				color: #333;
				line-height: 22px;
			}
			#wrapper {
				background-color: #fff;
				width: 100%;
				height: 450px;
				margin-top: -225px;
				overflow: hidden;
				position: absolute;
				top: 50%;
				left: 0;
			}
			#carousel img {
				display: block;
				float: left;
			}
			#prev, #next {
				background-color: rgba(255, 255, 255, 0.7);
				display: block;
				height: 450px;
				width: 50%;
				top: 0;
				position: absolute;
			}
			#prev:hover, #next:hover {
				background-color: #fff;
				background-color: rgba(255, 255, 255, 0.8);
			}
			#prev {
				left: -495px;
			}
			#next {
				right: -495px;
			}