webSIGHTdesigns - Web Design, Web Development, Web Hosting

jQuery Image Carousel with Hover Navigation

Posted on Thursday, November 21st, 2013 at 10:28 am
by webSIGHTdesigns

In this tutorial we create an image carousel in jQuery, featuring hover navigation, an option to open links in a new window, and preloading of the images through jQuery.

Hover Carousel

Demo

Let's set up our markup first: 

<div id="carousel">
	<div id="carousel_image">
		<img src="img/hover-carousel/1.jpg" alt="">
	</div>
	<div id="carousel_thumbs">
		<div id="carousel_up">
			<a href="#"><img src="img/hover-carousel/uparrow.png" alt="Scroll Up"></a>
		</div>
		<ul>
			<li class="active" data-carousel-img="img/hover-carousel/1.jpg">
				<a href="http://www.imdb.com/" target="_blank">Cats</a><br />
				JANUARY 1-3<br />
				THE COLISEUM
			</li>
			<li data-carousel-img="img/hover-carousel/2.jpg">
				<a href="http://www.imdb.com/" target="_blank">Men of War</a><br />
				OCTOBER 28-NOVEMBER 3<br />
				SOUTH THEATRE
			</li>
			<li data-carousel-img="img/hover-carousel/3.jpg">
				<a href="http://www.imdb.com/" target="_blank">Ballads in G Minor</a><br />
				NOVEMBER 15 - DECEMBER 22<br />
				THE ARENA
			</li>
			<li data-carousel-img="img/hover-carousel/4.jpg">
				<a href="http://www.imdb.com/" target="_blank">Destiny Forgotten</a><br />
				NOVEMBER 15 - DECEMBER 22<br />
				THE ARENA
			</li>
			<li data-carousel-img="img/hover-carousel/5.jpg">
				<a href="http://www.imdb.com/" target="_blank">The Delivery</a><br />
				NOVEMBER 15 - DECEMBER 22<br />
				THE ARENA
			</li>
			<li data-carousel-img="img/hover-carousel/6.jpg">
				<a href="http://www.imdb.com/" target="_blank">Ave Maria</a><br />
				NOVEMBER 15 - DECEMBER 22<br />
				THE COLISEUM
			</li>
		</ul>
		<div id="carousel_down">
			<a href="#"><img src="img/hover-carousel/downarrow.png" alt="Scroll Down"></a>
		</div>
	</div>
</div>

As you can see, we have some events listed in an unordered list on the right column and a main image in the left column. We only specify our first main image in the markup, we'll preload the other images in our jQuery.

var isScroll = false;
var newWindow = false;
var animateDuration = 200;
var stepValue = 40;

// preload images
$.fn.preload = function() {
	this.each(function(){
		$('')[0].src = this;
	});
}

$(document).ready(function() {

	$('#carousel_up a, #carousel_down a').on('click', function() {
		e.preventDefault();
	});
	$('#carousel_up').hover(function () {
		isScroll = true;
		gotoNext(true);
	}, function () { isScroll = false; });
	$('#carousel_down').hover(function () {
		isScroll = true;
		gotoNext(false);
	}, function () { isScroll = false; });
	$('#carousel_thumbs li').hover(function() {
		var attr = $(this).data('carousel-img');
		$('#carousel_image img').prop('src', attr);
		$('#carousel_thumbs li').removeClass('active');
		$(this).addClass('active');
	});
	$("#carousel_thumbs li").on('click', function(){
		if(newWindow) {
			window.open( $(this).find("a").attr("href") );
		} else {
			window.location=$(this).find("a").attr("href");
		}
		return false;
	});
	$([
		'img/hover-carousel/2.jpg',
		'img/hover-carousel/3.jpg',
		'img/hover-carousel/4.jpg',
		'img/hover-carousel/5.jpg',
		'img/hover-carousel/6.jpg'
	]).preload();

});

function gotoNext(dir) {
	if (isScroll) {
		isScroll = true;
		var step = dir ? '-='+stepValue : '+='+stepValue;
		$('#carousel_thumbs ul').animate({
			scrollTop: step
		}, animateDuration, "linear");
		setTimeout(function () { gotoNext(dir); }, animateDuration);
	}
}

When the user hovers over the menu items in the right column, the main image will change to that menu item's associated main image, as specified by the data-carousel-img attribute. if they click the menu item, the link as specified in the href attribute of the A tag will be opened. It will be opened in a new window if the newWindow variable is set to true.

Lastly, we just need to add some styling with CSS.

#carousel {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	width: 992px;
	height: 300px;
	margin: 0.5em auto 0;
	-webkit-box-shadow: 0 0 5px 2px #000;
	-moz-box-shadow: 0 0 5px 2px #000;
	box-shadow: 0 0 5px 2px #000;
}
#carousel_image,
#carousel_thumbs {
	float: left;
	clear: none;
	position: relative;
	display: block;
	text-align: center;
}
#carousel_thumbs {
	width: 292px;
}
#carousel_thumbs ul {
	background: #333 url('img/hover-carousel/carousel_thumbs.jpg') no-repeat center center;
	height: 250px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
	color: #fff;
	text-align: left;
}
#carousel_thumbs li {
	padding: 0.5em;
	border-bottom: 1px solid #999;
	font-size: 9pt;
}
#carousel_thumbs li.active {
	zoom: 1;
	filter: alpha(opacity=75);
	opacity: 0.75;
	background: #000;
}
#carousel_thumbs a {
	color: #fff;
	font-weight: bold;
	text-decoration: none;
}
#carousel_up,
#carousel_down {
	background: #000;
}
#carousel_up {
	padding: 6px 4px 5px;
	-webkit-border-radius: 0 3px 0 0;
	-moz-border-radius: 0 3px 0 0;
	border-radius: 0 3px 0 0;
	border-bottom: 1px solid #999;
}
#carousel_down {
	padding: 6px 4px 5px;
	-webkit-border-radius: 0 0 3px 0;
	-moz-border-radius: 0 0 3px 0;
	border-radius: 0 0 3px 0;
}
#carousel_up,
#carousel_down,
#carousel_thumbs li {
	cursor: hand;
	cursor: pointer;
}
#carousel_image img {
	-webkit-border-radius: 3px 0 0 3px;
	-moz-border-radius: 3px 0 0 3px;
	border-radius: 3px 0 0 3px;
}

You can change the margin on #carousel if you don't want it centered within its containing element.

Please Sign In

Please sign in to post a comment.

Web Development

View details »

Web Hosting

View details »

Our Portfolio

View portfolio »

WebSight Designs webSIGHTdesigns preferred email webSIGHTdesigns United States United States