Carousel

HTML

<script src="http://coolcarousels.frebsite.nl/js/jquery.carouFredSel.js"></script>
<div id="div-wrapper">
	<div id="carousel-inner">
		<div id="carousel-wrapper">
			<div id="carousel">
				<div><a href="#"><img src="01.jpg" width="746" height="214"></a></div>
                <div><a href="#"><img src="02.jpg" width="746" height="214"></a></div>
                <div><a href="#"><img src="03.jpg" width="746" height="214"></a></div>
                <div><a href="#"><img src="04.jpg" width="746" height="214"></a></div>
                <div><a href="#"><img src="05.jpg" width="746" height="214"></a></div>
				<div><a href="#"><img src="06.jpg" width="746" height="214"></a></div>
                <div><a href="#"><img src="07.jpg" width="746" height="214"></a></div>
                <div><a href="#"><img src="08.jpg" width="746" height="214"></a></div>
                <div><a href="#"><img src="09.jpg" width="746" height="214"></a></div>
                <div><a href="#"><img src="09.jpg" width="746" height="214"></a></div>
			</div>
		</div>
		<div id="pager-wrapper">
			<div id="pager">
				<img src="01.jpg" height="60" />
				<img src="02.jpg" height="60" />
				<img src="03.jpg" height="60" />
				<img src="04.jpg" height="60" />
				<img src="05.jpg" height="60" />
				<img src="06.jpg" height="60" />
				<img src="07.jpg" height="60" />
				<img src="08.jpg" height="60" />
				<img src="09.jpg" height="60" />
				<img src="10.jpg" height="60" />
			</div>
		</div>
	</div>
    <div id="nav"></div>
</div>

CSS

#div-wrapper{
		width: 947px;
	}
	
	#carousel-inner{
		position: relative;
		width: 975px;
		background: #000;
	}
	 
	#carousel-wrapper {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	 
		background: #000;
		width: 765px;
		padding: 5px;
	}
	
	#carousel {
		width: 765px;
		height: 214px;
		overflow: hidden;
	}
	
	#carousel > div, #carousel a{
		display: block;
		width: 746px;
		height: 214px;
	}
	
	#carousel > div{
		float: left;
		overflow: hidden;
	}
	
	#carousel img {
		display: block;
		float: left;
	}
	#pager-wrapper {
		height: 214px;
		width: 300px;
		overflow: hidden;
		position: absolute;
		top: 0px;
		left: 753px;
		z-index: 2;
	}
	
	#pager{
		background: #000;
	}
	
	#pager img {
		cursor: pointer;
		background: #000;
		display: block;
		padding: 5px;
		float: left;
		zoom: 1;
		filter: alpha(opacity=50);
		opacity: 0.5;
	}
	#pager img:hover {
		zoom: 1;
		filter: alpha(opacity=100);
		opacity: 1;
	}
	#pager img.selected {
		zoom: 1;
		filter: alpha(opacity=100);
		opacity: 1;
	}
	
	#nav{
		text-align: center;
		margin-top: 10px;
	}
	
	#nav a{
		margin: 0 5px;
		text-decoration: none;
		display: inline-block;
		background:url(dots.png) 0 0 no-repeat;
		width: 12px;
		height: 12px;
	}
	
	#nav a.selected{
		background-position: 0 -12px;
	}
	
	#nav:after{
		clear: both;
	}

JavaScript

$(function() {
		var $carousel = $('#carousel'),
			$pager = $('#pager');
	 
		function getCenterThumb() {
			var $visible = $pager.triggerHandler( 'currentVisible' ),
				center = Math.floor($visible.length / 2);
			
			return center;
		}
	 
		$carousel.carouFredSel({
			responsive: true,
			items: {
				visible: 1,
				width: 746,
				height: (214/746*100) + '%'
			},
			scroll: {
				fx: 'crossfade',
				onBefore: function( data ) {
					var src = data.items.visible.first().attr( 'src' );
					src = src.split( '/large/' ).join( '/small/' );
	 
					$pager.trigger( 'slideTo', [ 'img[src="'+ src +'"]', -getCenterThumb() ] );
					$pager.find( 'img' ).removeClass( 'selected' );
				},
				onAfter: function() {
					$pager.find( 'img' ).eq( getCenterThumb() ).addClass( 'selected' );
				}
			},
			pagination: {
				container: '#nav'
			}
		});
		
		$pager.carouFredSel({
			height: '100%',
			auto: false,
			width: 300,
			items: {
				visible: 3
			},
			direction: "up",
			onCreate: function() {
				var center = getCenterThumb();
				$pager.trigger( 'slideTo', [ -center, { duration: 0 } ] );
				$pager.find( 'img' ).eq( center ).addClass( 'selected' );
			}
		});
		$pager.find( 'img' ).click(function() {
			var src = $(this).attr( 'src' );
			src = src.split( '/small/' ).join( '/large/' );
			$carousel.trigger( 'slideTo', [ 'img[src="'+ src +'"]' ] );
		});
		
		$('#nav').hover(function() {
			var current = $('#carousel').triggerHandler( 'currentPosition' );
			thumbs.trigger( 'slideTo', [ current, 0, true, { fx: 'none' } ] );
			$('#thumbs').stop().fadeTo(300, 1);
		}, function() {
			$('#thumbs').stop().fadeTo(300, 0);
		});
		
		$('#nav a').mouseenter(function() {
			var index = $('#nav a').index( $(this) );
		
			//	clear the queue
			thumbs.trigger( 'queue', [[]] );
			
			//	scroll
			thumbs.trigger( 'slideTo', [index, { queue: true }] );
		});
	});