webSIGHTdesigns - Web Design, Web Development, Web Hosting

jQuery Continuous iTunes Carousel Slider

Posted on Wednesday, October 30th, 2013 at 7:51 pm
by webSIGHTdesigns

Create a carousel slider like the Featured slider in the Apple App Store.

In March of 2010, NetTuts posted How to Create a Simple iTunes-like Slider to show how to create a carousel slider similar to the type found in iTunes under the App Store link (or in the App Store app on Mac OS).

The tutorial was great but there were some other features we wanted to implement. We set out to make the following changes:

  • Continuous scrolling of the images (no scrolling back to the top)
  • Scroll the thumbnails downward
  • Hide the next link until hover
  • Stop the cycling of images when the next link is clicked and wait 8 seconds until beginning again

Demo »

Our CSS styles:

*{
	margin: 0;
	padding: 0;
	border: 0 none;
	outline: 0;
}
body {
	text-align: center;
	background: #020202;
}
#container{
	width: 1067px;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	position: relative;
	-webkit-border-radius: 0 0 8px 8px;
	-moz-border-radius: 0 0 8px 8px;
	border-radius: 0 0 8px 8px;
	overflow: hidden;
}
img{
	display: block;
}
#gallery, #thumbs{
	float: left;
}
#gallery{
	width: 800px;
	height: 300px;
	overflow: hidden;
}
#gallery img{
	position: absolute;
}
#thumbs{
	width: 267px;
	height: 300px;
	position: relative;
	overflow: hidden;
}
#thumbs img {
	margin: 0;
}
#next{
	display: block;
	width: 47px;
	height: 8px;
	background: url(img/itunes2/arrow.png) 0 -46px;
	position: relative;
	top: 292px;
	left: 915px;
}
#next:hover{
	background: url(img/itunes2/arrow.png) 0 0;
	top: 257px;
	height: 43px;
}

Our jQuery script:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script>
	$(document).ready(function() {
		/* demo script */
		var index = 0;
		var tindex = 6;
		var images = $("#gallery img");
		var thumbs = $("#thumbs img");
		var imgHeight = 100;

		for (i=0; i<thumbs.length; i++) {
			$(thumbs[i]).addClass("thumb-"+i);
			$(images[i]).addClass("image-"+i);
		}

		show(index, tindex);
		$autotimer = setInterval(sift, 8000);

		$("#thumbs").animate({
			scrollTop: 200
		}, 400, 'easeOutSine');

		function sift() {
			$('#thumbs img:first-child').animate(
				{
					'margin-top': '100px'
				},
				400,
				'easeOutSine',
				function() {
					$(thumbs).slice(tindex, (tindex + 1)).clone().prependTo("#thumbs");
					$("#thumbs img:last-child").remove();
					$('#thumbs img').css('margin-top', '0');
				}
			);

			if ( index < 5){
				index += 1;
			} else {
				index = 0;
			}

			if(tindex > 0) {
				tindex = tindex - 1;
			} else {
				tindex = 5;
			}

			show(index, tindex);
		}

		function show(num, tnum) {
			$(images).fadeOut(400);
			$(".image-"+num).stop().fadeIn(400);
		}

		$("#next").on('click', function(e) {
			sift();
			if(typeof $autotimer != "undefined" && $autotimer != false) {
				clearInterval($autotimer);
				$autotimer = false;
				setTimeout(function(){
					$autotimer = setInterval(sift, 8000);
				}, 8000);
			}
			e.preventDefault();
		});

	});
</script>

And the markup:

<div id="container">

	<div id="gallery">
		<img src="img/itunes2/1.jpg">
		<img src="img/itunes2/2.jpg">
		<img src="img/itunes2/3.jpg">
		<img src="img/itunes2/4.jpg">
		<img src="img/itunes2/5.jpg">
		<img src="img/itunes2/6.jpg">
	</div>

	<div id="thumbs">
		<img src="img/itunes2/66.jpg">
		<img src="img/itunes2/55.jpg">
		<img src="img/itunes2/44.jpg">
		<img src="img/itunes2/33.jpg">
		<img src="img/itunes2/22.jpg">
		<img src="img/itunes2/11.jpg">
	</div>

	<a href="#" id="next"></a>

</div>

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