Now showing image of 5.

Go to image

HTML

		<div id="wrapper">
			<div id="carousel">
				<img src="img/large/sp-die-hard.jpg" alt="Die Hard" width="700" height="525"/ >
				<img src="img/large/sp-fat-red-line.jpg" alt="Fat Red Line" width="700" height="525" />
				<img src="img/large/sp-resevoir-dogs.jpg" alt="Resevoir Dogs" width="700" height="525" />
				<img src="img/large/sp-fatrix.jpg" alt="The Fatrix" width="700" height="525" />
				<img src="img/large/sp-colorado-is-not-enough.jpg" alt="Colorado Is Not Enough" width="700" height="525" />
			</div>
			<a href="#" title="Go to the previous image." id="prev"></a>
			<a href="#" title="Go to the next image." id="next"></a>
			<div id="navi">
				<p id="pagenumber">Now showing image <span></span> of 5.</p>
				<p id="title"></p>
				<p id="pager">Go to image <span></span></p>
			</div>
		</div>
	

JavaScript

			function setNavi( $c, $i ) {
				var title = $i.attr( 'alt' );
				$('#title').text( title );

				var current = $c.triggerHandler( 'currentPosition' );
				$('#pagenumber span').text( current+1 );

				var $prev = ($i.is(':first-child')) ? $c.children().last() : $i.prev();
				var small = $prev.attr('src').split('/large/').join('/small/');
				$('#prev').html('<img src="'+small+'" />');

				var $next = $i.next();
				var small = $next.attr('src').split('/large/').join('/small/');
				$('#next').html('<img src="'+small+'" />');
			}
			$(function() {
				$("#carousel").carouFredSel({
					items: 1,
					prev: '#prev',
					next: '#next',
					pagination: {
						container: '#pager span',
						anchorBuilder: function( nr, $img ) {
							var small = $img.attr('src').split('/large/').join('/small/');
							return '<a href="#" title="Go to image '+nr+'.">'+nr+'<img src="'+small+'" /></a>';
						}
					},
					scroll: {
						onBefore: function( $oI, $nI ) {
							setNavi( $(this), $nI );
						}
					},
					onCreate: function( $vI ) {
						setNavi( $(this), $vI );
					}
				});
			});
		

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 {
				border: 1px solid #ddd;
				background-color: #fff;
				width: 740px;
				height: 600px;
				margin: -300px 0 0 -370px;
				position: absolute;
				top: 50%;
				left: 50%;
				
				box-shadow: 0 0 20px rgba(0, 0, 0, .3);
			}
			#carousel {
				width: 700px;
				height: 525px;
				margin: 20px 0 0 20px;
				overflow: hidden;
			}
			#carousel img {
				display: block;
				float: left;
			}
			#prev, #next {
				display: block;
				width: 350px;
				height: 525px;
				position: absolute;
				top: 20px;
			}
			#prev img, #next img {
				background: url(img/thumb-bgs.png) 0 0 no-repeat transparent;
				display: none;
				padding: 15px;
				position: absolute;
				top: 200px;
			}
			#prev:hover img, #next:hover img {
				display: block;
			}
			#prev {
				left: 20px;
			}
			#next {
				right: 20px;
			}
			#prev img {
				background-position: 0 -230px;
				padding-left: 25px;
				left: 0;
			}
			#next img {
				background-position: 0 -115px;
				padding-right: 25px;
				right: 0;
			}
			#wrapper:hover #prev, #wrapper:hover #next {
				display: block !important;
			}
			#navi {
				width: 660px;
				margin: 15px 0 0 40px;
			}
			#pagenumber, #title, #pager {
				margin: 0;
				padding: 0;
			}
			#pagenumber {
				width: 200px;
				float: left;
			}
			#title {
				font-size: 18px;
				text-align: center;
				width: 260px;
				float: left;
			}
			#pager {
				text-align: right;
				width: 200px;
				float: right;
			}
			#pager a {
				text-decoration: none;
				text-align: center;
				line-height: 20px;
				display: inline-block;
				width: 18px;
				height: 20px;
				position: relative;
			}
			#pager a.selected {
				background-color: #666;
				color: #fff;
			}
			#pager a img {
				background: url(img/thumb-bgs.png) 0 0 no-repeat transparent;
				padding: 15px 15px 25px 15px;
				display: none;
				position: absolute;
				bottom: 20px;
				left: -57px;
			}
			#pager a:hover img {
				display: block;
			}