How to Create a Simple iTunes-like Slider

Siddharth on Mar 5th 2010 with 141 comments

Tutorial Details

Technology: jQuery
Difficulty: Intermediate
Estimated Completion Time: 30 Minutes

When space is at a premium, making use of sliders is the optimal way to present information. Today, we’ll take a look at how to create a slider similar to the one used in the iTunes store.

Developers often seek the functionality provided by sliders in order to fit lots of information in the space provided. But creating such a slider is not as difficult as you might think. With a little planning and some experimenting, you can create one rather quickly.

I believe a demo is worth a thousand words. Hit the demo and try it out yourselves.

Interested? Let’s get started right away!

Design Goals

Before we start coding, here are a few goals for this widget.

Minimize the space taken up by images by making the slideshow’s dimensions the same size of a single image and then fading between them.
Provide a vertical carousel of images on the side showing upcoming images.
Provide a method to manually move the carousel and the slideshow forward. In this instance, we make use of a simple anchor element.
On the carousel, the top most image is the next in line and will be displayed when the next button is clicked.
Minimize DOM manipulation as much as possible. That’s not to say we aren’t going to touch the DOM, it’s just that we aren’t going to meddle with the DOM too much.

Plan of Action

There are actually a handful of techniques to make a widget like this. For our purposes today, I’m going to stick with a technique which adheres to a saying:

When in doubt, use brute force.

Step 1: Setup the CSS for the gallery container so that all the main images collapse into taking the space of a single image. I’ll explain this point later below.

Step 2: Setup the CSS for the thumbnail container so that only three images are visible at once.

Step 3: Cycle through the images and assign a class to each thumbnail and image with a numeric index to identify each independently. For example, each image gets a class of thumb-xx where xx is a number.

Step 4: When the next button is clicked, move the carousel one thumbnail up and then display the thumbnail’s corresponding image.

These are the basic steps involved in creating such an effect. I’ll explain each step in detail as we go along.

Step 1: Core Markup

The HTML markup for the demo page looks like so:

<!DOCTYPE html>  
<html lang="en-GB">  
	<head>
		<title>iTunes slider</title>
		<link rel="stylesheet" href="style.css" type="text/css" />
	</head>

	<body>
    	<div id="container">
        	<h1>Create a simple iTunes-esque slider with jQuery</h1>
		<div>by Siddharth for the lovely folks at Net Tuts</div>
		<p>A simple slider/slideshow which mostly emulates the one on iTunes barring a few changes. Click the down button to cycle the images.</p> 
        
		<div id="gallery">
    		   <img src="img/1.jpg" />
    		   <img src="img/2.jpg" />
    		   <img src="img/3.jpg" />
    		   <img src="img/4.jpg" />
            	   <img src="img/5.jpg" />
            	   <img src="img/6.jpg" />
	        </div>
        
                <div id="thumbs">
    	   	   <img src="img/11.jpg" />
    		   <img src="img/22.jpg" />
    		   <img src="img/33.jpg" />
    		   <img src="img/44.jpg" />
            	   <img src="img/55.jpg" />
            	   <img src="img/66.jpg" />    
	        </div>
        
        	<a href="#" id="next"></a>
        </div>
        
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/mocha.js"></script>

	</body>
</html>

Disregarding the boiler plate code, we have two container elements full of images: one for the main gallery images and one for the thumbnails. I’ve given an ID to both of them so they can be easily accessed from the JavaScript. We also include an anchor element which acts as the next button.

We include the jQuery library and our own script file at the end.

At the end of this stage, our demo page looks like just a list of images.

Step 2: CSS Styling

*{
	margin: 0;
	padding: 0;
	border: 0 none;
	outline: 0;
}

body{
	font-family: "Lucida Grande", "Verdana", sans-serif;
	font-size: 12px;
}

p{
	margin: 20px 0 40px 0;
}
h1{
	font-size: 30px;
	font-family: "Myriad Pro", "Lucida Grande", "Verdana", sans-serif;
	padding: 0;
	margin: 0;
}

h2{
	font-size: 20px;
}

#container{
	width: 900px;
	margin-left: auto;
	margin-right: auto;
	padding: 50px 0 0 0;
	position: relative;
}

img{
	display: block;
}

#gallery, #thumbs{
	float: left;
}

#gallery{
	width: 800px;
	height: 300px;
	overflow: hidden;
}

#gallery img{
	position: absolute;
}

#thumbs{
	width: 100px;
	height: 300px;
	overflow: hidden;
}

#next{
	display: block;
	width: 47px;
	height: 43px;
	background: url(img/arrow.png);
	position: relative;
	top: 257px;
	left: 855px;
}

#next:hover{
	background: url(img/arrowmo.png);
}

.clear{
	clear: both;
}

The CSS is pretty self explanatory but there are a couple of points I want you to take note of:

First up, notice that I’ve applied position: absolute to #gallery img. This makes sure that the images are stacked on top of each other instead of one below the other. This way we can later manipulate their opacity to decide which image to show.

Secondly, notice that the thumbs element has its height set to 300px. This is because the thumbnails in the demo are 100px tall each and I want the carousel to show 3 images at once. Essentially, for your own implementation, multiply the height of a thumbnail by the number of thumbnails you want to show at once to find the required height of the element.

Also, take note of the fact that we’ve set its overflow property to hidden to make sure no more than 3 thumbnails are shown at once.

After we’ve styled our slider, it looks like the image below. Notice that almost everything is in place. The last image is stacked at the top and is thus visible.

Step 3: JavaScript Implementation

Now that we have a solid framework and some basic styling in place, we can begin coding the required functionality. Note that we make extensive use of jQuery. Feel free to link to Google’s CDN if necessary.

Procuring the Elements and Prepping them

We first need to acquire the images and their corresponding thumbnails so that we can process them.

	var images = $("#gallery img");
	var thumbs = $("#thumbs img");
        var index = 0;

The above snippet will take care of obtaining the list of images and thumbnails, and storing them for later use. We also create a variable called index to denote which element to start from. For now, I’m setting it to start from the first element. Note that index is zero based.

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

Next, we just iterate through both the lists and and add a class of thumb-xx or image-xx to each element where xx is a number. This lets us look for each individual thumbnail or image independently.

Hooking up the Handler

We now need to create an event handler and attach it to the next button so that we can do something when the button is clicked.

$("#next").click(sift);

The one liner above will take care of that. Essentially, we ask it to call the sift function everytime next is clicked.

function sift()
	{
		if (index<(thumbs.length-1)) {index+=1 ; }
		else {index=0}
		show (index);
	}

This is a very simple event handler actually. We just check to see what element is currently selected. If it is the last, we reset the index so the carousel goes back to the first element, thus creating a pseudo infinite carousel. Otherwise, we increment index by 1.

Next, we call the function show, passing in the index variable as a parameter. We’ll create the function in a bit.

Step 4: Implementing the Core Logic

function show(num)
	{
		images.fadeOut(400);
		$(".image-"+num).stop().fadeIn(400);
		var scrollPos = (num+1)*imgHeight;
		$("#thumbs").stop().animate({scrollTop: scrollPos}, 400);		
	}

The show function implements the core functionality of this widget. Let me explain each part.

First, we fade out every image the gallery element contains. Next, we fade in just the required image making use of its class. Since each image can be accessed through its class and we have access to the positional index of the image, we just use the following selector: “.image-”+num

Next, we need to scroll the thumbnail element so that the required image is at the top of the carousel. There are two ways to go on about doing this.

The first method makes use of jQuery’s position property. This lets us find the element’s position relative to its parent element. Unfortunately, I’ve been running into quite a few problems with it and Chrome which means we’ll have to use our second method.

The next method is actually just as simple. Since we can easily obtain the height of a thumbnail and since each thumbnail is required to be of the same height, we can easily just find the product of the nth element’s position in the list and the height of a thumbnail to obtain its offset from the top.

var imgHeight = thumbs.attr("height");

The above line lets us obtain a thumbnail’s height. Remember that a collection of elements can be queried just like a normal element.

var scrollPos = (num+1)*imgHeight;

We now calculate the offset of the thumbnail we need. Since we need the thumbnail of the next element in the list and not of that image itself, we increment it by 1 before multiplying it by the height.

With all this info, we can now scroll the element to the height we need.

$("#thumbs").stop().animate({scrollTop: scrollPos}, 400);

We use jQuery’s animate property to alter the scrollTop property to the value we calculated above. If you are new to jQuery’s animation functions, refer to my earlier article. Essentially, we scroll the element x pixels from the top to create a carousel effect.

Step 5: A Few Tweaks

Polishing the Pseudo Infinite Effect

We are essentially done but a few quick bits of code will make it a little bit more polished.

thumbs.slice(0,3).clone().appendTo("#thumbs");

This line essentially takes the first three thumbnails, copies them over to the end of the list. The slice method selects the first three elements, the clone methods clones these DOM elements and finally the appendTo methods adds them to the passed element.

We can’t just use the appendTo method since it plucks the selected elements from their current position before placing it as required. We need the clone method to copy them first.

We do this to make sure when we approach the final few thumbnails, the illusion of an infinite carousel remains. Else, the user just sees empty blocks which isn’t really what we need.

Making it Auto Rotate

Making the widget auto rotate is actually very simple. Since we have a proper event handler in place, we just have to call the handler every n microseconds. The following line will take care of that:

setInterval(sift, 8000);

In the above code, I’ve asked to call the sift function every eight seconds. Remember, the duration is passed in as microseconds so n thousand equals n seconds.

Initializing the Widget

Currently, the page loads with the widget uninitialized. We’ll need to rectify this. All we need to do is to call the show function passing in the starting position as a parameter.

After you’ve attached the event handler, add this:

show(index);

The Final Code

And we are done! The final code looks like so:

$(document).ready(function() 
{	 
	var index = 0;
	var images = $("#gallery img");
	var thumbs = $("#thumbs img");
	var imgHeight = thumbs.attr("height");
	thumbs.slice(0,3).clone().appendTo("#thumbs");
	for (i=0; i<thumbs.length; i++)
	{
		$(thumbs[i]).addClass("thumb-"+i);
		$(images[i]).addClass("image-"+i);
	}
	
	$("#next").click(sift);
	show(index);
	setInterval(sift, 8000);
	
	function sift()
	{
		if (index<(thumbs.length-1)){index+=1 ; }
		else {index=0}
		show (index);
	}
	
	function show(num)
	{
		images.fadeOut(400);
		$(".image-"+num).stop().fadeIn(400);
		var scrollPos = (num+1)*imgHeight;
		$("#thumbs").stop().animate({scrollTop: scrollPos}, 400);		
	}
});

Conclusion

And there you have it: we’ve created a simple but useful slider. Hopefully you’ve found this tutorial interesting and useful. Feel free to reuse this code elsewhere in your projects, and chime in within the comments if you are running into difficulties.

Questions? Nice things to say? Criticisms? Hit the comments section and leave me a comment. Happy coding!

Siddharth is Siddharth on Codecanyon

Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By Siddharth

Rollover to read this author's bio or click through to see a full list of posts by this author.

Hola! I'm the associate editor here, editor of Windows.AppStorm, the lead reviewer at CodeCanyon and a reviewer at ThemeForest. When I'm not working for Envato, I'm a web developer/designer with expertise in JavaScript, PHP and Ruby . I am passionate about web technologies and video games and I really think code *is* art. It's a well known fact that following me has brought people great fortune and a lot of cuddles!

Plus Premium

Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more

dRichard
I’m very new to Html and web design, how would you implement the CSS on a webpage? And, how would you make those images allow links?
-much appreciative

http://20tap.com Sebastian
The preferred way to implement CSS is to create a new document and put your CSS in it (let’s call it styles.css)
Then in the portion of your html, use
I’m not too sure if this is what you meant, but if you wanted those images to link to another site you could do something like this
Hope this helps!

http://20tap Sebastian
Sorry, html was cut out
here they are again
>link href=”style.css” rel=”stylesheet” type=”text/css” /<
for linking to your stylesheet. be sure to put that in the >head< of your html document
as for the links…
>a href=”http://example.com”<>img src=”example.jpg” alt=”example image” /<>/a<
http://20tap.com Sebastian
my god that’s frustrating…
just switch the > with the < and vice versa.

http://jbirdmedia.org Jason
quick question…I have everything working great, but 1 problem. How can I turn off whatever it is that cause my thumbnails to be duplicated. Right now I only have 2 thumbs, but for my site I may never have more than 3. I do not want my thumbs to be auto duplicated, I would just prefer they not scroll if I don’t have more than 3
How could I accomplish that?
you can see my progress here…
http://jbirdmedia.org/projects/refuge/
Filip
Great tut! However, the auto rotate-function does work in Safari and Chrome, but not in Firefox! Why is this?
What can I do about it?

Matija
Should work…works flawless on my FF 3.6.8. and 4.0b4…try in safe mode or something,
could be some of your ext is causing it not to work

http://www.websightdesigns.com/ WebSight Designs
Great jquery tutorial, thanks! I modified the code a bit to change the scroll direction of the thumbnails, so they now scroll from the top the bottom. To do this I had to make it show the last image first. I am definitely open to hearing any other ways of doing this if anyone knows of a better way. You can see my example on my blog post, jQuery iTunes-like Content Slider. Thanks and keep up the great work!

Ghadaffi
@WebSight Designs
Please i would like to know how u did the AUTO SCROLL on firefox?

http://www.design-vibe.co.uk Web Design Norwich
This is great, thanks for this!
james
what would be the best way to add a caption to each image as it changes? really struggling to make any headway with it!
Ghadaffi
@WebSight Designs
Please how did you do the AUTO SCROLL on firefox?
http://www.design21th.com Web Dizajn
hi from Sarajevo! Very nice tutorial!
http://www.lifeinglory.org Stefan
Hello everyone! Examined the responses of this model of slider and some of you propose a better version! Can you indicate where I can download it! Since I tried this slider and has many shortcomings!
Thanks!
http://www.vainfotech.com va Infotech
very usefull for me
I am Website Designer in india
JohnJ
Any chance the issue with the next button not aligning right has been fixed for IE7? Also downloaded latest build and getting console.log error.

Erica
I am also getting this error in IE. It seems to make the slideshow not work. Works great in FF. Is there any solution?

http://www.safetyjunction.co.uk Jason B
Nice but autoscrolling with pause and up button would be good. Also it’s not clear from that example what the thumbnails relate to.
Thanks though
Dilip
Awesome code Sid !
ashok
there is bug!!!!!
when if you click continue for some on arrow btn bottom… images will go disappear in some time…
try it..
montha
I create on my computer with windows xp and ie8 it very work but when I use on ms server 2003 and ie8 too but code not run . please help me.
Valencia
Really useful tutorial. I have a question, Is it possible to have a previous button and highlighted thumbnails.
http://dev.exoticmotorsmidwest.com/about Ben
Does anyone know why the js isn’t working in Internet Explorer?? It appears to work on all other browsers.
http://www.egtagames.com gta-games
awesome dude, very nice. thanks
saeed
great slider but if u give admin panel to slider(user can upload images except write code in html ) it will be wonderful
Jay A.
Hey i know this thread is super old but I really want to use this and when I try it just doesnt fit.. I mean does it have a border I can remove? sorry im kind of a beginner
Ben
Doesn’t work in IE any available hack that will allow for that?
gavsiu
great slider.. even works in ie6.
how do you change the thumbs direction to horizontal though, I tried replacing height to width and top to left/right and float thumbs left, but it doesn’t work

gavsiu
nvm, i got it
#thumbs {
height: #px; height of thumbnail
width: #px; width of container
white-space: nowrap;
overflow: hidden;
}
#thumbs img {
display: inline;
}
var imgWidth = thumbs.attr(“width”);
var scrollPos = (num+1)*imgWidth;
$(“#thumbs”).stop().animate({scrollLeft: scrollPos}, 400);
my next mission is to add previous and pause buttons in addition to the provided next. im done here though.. thanks guys.

Shawn
For some reason this slider isn’t auto scrolling in internet explorer. It works perfectly in all other browsers.. has anyone found a fix for this? I would love to use this in an upcoming project.
Caio Norder
Not work to ie7!?
nounie
very well explained tutorial .I think you could have improved it by adding some rounded corners using css3 . Another guy wrote a similar article on how to clone apple itunes banner rotator here :
http://youhack.me/2011/08/11/create-an-itunes-like-banner-rotatorslideshow-with-jquery/
Demo url : http://youhack.me/demo/Apple%20itunes%20banner%20rotator/index.html
http://www.zestytechnologies.com jacob
very nice cool jQuery effects.Thanks
Benson
Thanks for this plugin, I was looking for the exact thing and here i find it..cool!
http://www.webdrawings.gr Mark
Works perfectly in IE7 but in other browsers the thumbs on the left are not auto-scrolling.
Any idea?
charles
Hi, everyone
I am starter on Jquery, and I have tried finding help from web. but I did not really get too much info.
I have changed many things at style sheet, and i was able not get it work. Now I am just super confused with everything.
Can anyone tell me what is going on with these couple of lines
1.var images = $(“#gallery img”); how would img make difference.
2. $(thumbs[i]).addClass(“thumb-”+i); i do not see class like that defined and why can i just add i after “thumb”. How does it work?
3. $(“.image-”+num).stop().fadeIn(400); why stop() is put in between of fadeIn ?
appreciate your help….
http://locnessdesigns.com Loc
Is there a way to stop it from automatically going to the top of the page when you click on the arrow? If you scroll down, hit the arrow, it brings the page to the top every time. I just don’t want that to happen for this site I’m adding this slider to.
Tiziano
I went crazy before I understand that it doesn’t work on jquery 1.6.1 :( In particular, the thumbs don’t scroll up with that version of jquery.
So I had to download jquery v1.4.1 and it all perfectly works :)
http://www.site-stats.info Site Statis Info
Awesome slider, and great tutorial.. I am still on the process of working with JQUERY. But i got this one very quick.. Thanks bro
Ian
I would also like to know if it is possible to have this with captions?

Ia
Also doesn’t seem to be working in the latest version of Safari.
http://www.simplydg.com David
To add a caption, use this for your javascript:
$(document).ready(function()
{
var index = 0;
var images = $(“#gallery img”);
var thumbs = $(“#thumbs img”);
var caption = $(“#caption p”); //THIS IS NEW
var imgHeight = $(thumbs).attr(“height”);
$(thumbs).slice(0,3).clone().appendTo(“#thumbs”);
for (i=0; i<thumbs.length; i++)
{
$(thumbs[i]).addClass("thumb-"+i);
$(images[i]).addClass("image-"+i);
$(caption[i]).addClass("caption-"+i); //THIS IS NEW
}
$("#next").click(sift);
show(index);
setInterval(sift, 8000);
function sift()
{
if (index<(thumbs.length-1)){index+=1 ; }
else {index=0}
show (index);
}
function show(num)
{
$(images).fadeOut(400);
$(".image-"+num).stop().fadeIn(400);
var scrollPos = (num+1)*imgHeight;
$("#thumbs").stop().animate({scrollTop: scrollPos}, 400);
console.log(scrollPos, "img.image-"+num);
$(caption).fadeOut(400); //THIS IS NEW
$(".caption-"+num).stop().fadeIn(400); //THIS IS NEW
}
});
Add this to your Stylesheet
#caption {
display:block;
}
#caption p {
position:absolute;
margin: 20px auto 0;
padding: 10px;
color: #000;
background: #fff;
}

Vinayak Kolagi
Nice tutorial. Carousel effect is really good.
Bit of a type in your tutorial I suppose: 8000 microseconds = 8 seconds..
It should have been 8000 milliseconds = 8 seconds .
Nevertheless learnt a lot from the tutorial . Thanks..
Andreas
Great tutorial!
I just want to adjust the size. I want the entire slideshow to be 800 pixels fr example. That means 700px gallery+ 100 pixels thumbs. What do I have to change so that the gallery doesnt break??? Any Ideas?
karan
Thank you for your nice tutorial, however i would like to ask if you can show me how those photos can be generated without putting each one’s link. It means by putting a query that will list them from SQL table automatically by using PHP.
http://bloggerjavascript.blogspot.com/ jack arroyo
http://bloggerjavascript.blogspot.com/
This is yet done! Apple theme! get it!

patrice
what i wanted to say is a PHP code like this which will list all photos from database. but i is not working on my side, I wanted to know if there is some correct way of writing it in order to have all photos in the slideshow.:
query(‘SELECT chemin FROM slides’);
while ($donnees = $reponse->fetch())
{
?>
<img src="images/” title=”Newsflash 2″ height=”300″ width=”450″/>
Newsflash 2
In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. …
closeCursor();
}
catch(Exception $e)
{
// En cas d’erreur précédemment, on affiche un message et on arrête tout
die(‘Erreur : ‘.$e->getMessage());
}
?>

Jorge
Thanks for this great tutorial…
http://josephbuarao.com Joseph Buarao
what a great tutorial, very informative.. :)
Jake
Hi, I really love your design but I am having problem coding….
So what I did is basically copy and paste your code into a .jsp file in netbeans.
But after I was done with the pasting (was just testing to see if it works) the image scroller
doesn’t work…like the layout is fine but nothing changes..its like on step 2 after CSS.
The image stays there with no effect. Oh and I changed the because those image didnt display
for me so I just took some random pictures off the internet.
This is how i pasted the code:
I put all codes in step 1 in
I put all codes in step 2 (css) in
I put all javascript codes in
so its all in 1 page..
I really need help =/ and I’m like new to this web design stuff.
Thank you

Jake
umm the area where i pasted my codes didnt display…
here it is again:
This is how i pasted the code:
I put all codes in step 1 in -body- code here -bode-
I put all codes in step 2 (css) in -head- -style- code here -style- -head-
I put all javascript codes in -head- -script- code here -script- -head-

Marc
But this is not so smooth like iTunes, and also it is not looping instead it is running fast reverse. I saw another best working example in http://www.digitaljuice.com/products/categories.asp?cid=3
You can check similar effect site-wide.
Dj
Currently it is auto rotation slideshow, what if I want to change the image on click of respective thumbnails? PLease send me answer. really urgent.
http://www.saganmarketing.com Custom Designer
Thank you Siddharth for this sweet plug in! Tahnks David for the Caption code.
http://arteyanos.com galax
Gracias por el tutorial =)
Miguel Fontamillas
Nice Style!
saber
Hello
thank you for your beautiful jquery but i have a question that can i
use from your jquery to create template for my commercial and sell it or not?
please answer my question with email
thank you
http://blog.peipians.com Danish Backer
For those who are not able to run this on IE, remove or comment the following line in mocha.js as it is using only for testing purpose. Also i hope it only works with modern browsers.
console.log(scrollPos, “img.image-”+num);
And now i have a problem i really like this script, very simple and beautiful. But it is not working after jquery 1.4.1
Please help me!.

http://blog.peipians.com Danish Backer
Now it is working for me. Here is the cause and it’s solution.
Cause: As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. In addition, .attr() should not be used on plain objects, arrays, the window, or the document.
So, i just specified height in html now its working in jQuery 1.7.2
Thanks

http://www.gifeasy.com gifeasy
Good info for image slide show.
http://www.webtechnologyqueensland.com David
I like the slider and have integrated it into a website we built for a church – http://www.peace.org.au – however we added functionality for linking each of the images – that’s a common need for sliders.
Our problem is when the script adds the extra thumbs on automatically it drops the links to the thumbs somehow – I’m wondering how this can be fixed – I’m not really a javascript guy – invested all my time into php and still clueless with sliders and the like. Would appreciate a pointer in the right direction from someone.
http://www.webtechnologyqueensland.com David
Don’t worry – I figured it out by guessing and trying a few thigns – here is the modified code which will allow links.
In the html you must add a div surrounding the thumbs
thumb div goes here with thumb images coding </div
In the html you must also place your anchor tags around each and every image
Finally modify the javascript by adding these 3 lines
First declare this variable at the top
var links = $(“#links a”);
Second add this line under the line starting with thumb.slice
links.slice(0,3).clone().appendTo(“#links”);
Finally add this line in the for loop
$(links[i]).addClass(“links-”+i);
You end up with a new script that looks like this – the css does not need modification and the html needs the links div and the anchor tags added.
$(document).ready(function()
{
var index = 0;
var images = $(“#gallery img”);
var thumbs = $(“#thumbs img”);
var links = $(“#links a”);
var imgHeight = thumbs.attr(“height”);
thumbs.slice(0,3).clone().appendTo(“#thumbs”);
links.slice(0,3).clone().appendTo(“#links”);
for (i=0; i<thumbs.length; i++)
{
$(thumbs[i]).addClass("thumb-"+i);
$(images[i]).addClass("image-"+i);
$(links[i]).addClass("links-"+i);
}
$("#next").click(sift);
show(index);
setInterval(sift, 12000);
function sift()
{
if (index<(thumbs.length-1)){index+=1 ; }
else {index=0}
show (index);
}
function show(num)
{
images.fadeOut(1500);
$(".image-"+num).stop().fadeIn(1500);
var scrollPos = (num+1)*imgHeight;
$("#thumbs").stop().animate({scrollTop: scrollPos}, 1500);
}
});
Check out a working example at http://www.peace.org.au

How to Create a Simple iTunes-like Slider

Tutorial Details

Design Goals

Plan of Action

Step 1: Core Markup

Step 2: CSS Styling

Step 3: JavaScript Implementation

Procuring the Elements and Prepping them

Hooking up the Handler

Step 4: Implementing the Core Logic

Step 5: A Few Tweaks

Polishing the Pseudo Infinite Effect

Making it Auto Rotate

Initializing the Widget

The Final Code

Conclusion

Enjoyed this Post?

By Siddharth

Hello!

Premium Members

Full-time, Part-time and Contract Jobs

Freelance Jobs

How to Create a Simple iTunes-like Slider

Tutorial Details

Design Goals

Plan of Action

Step 1: Core Markup

Step 2: CSS Styling

Step 3: JavaScript Implementation

Procuring the Elements and Prepping them

Hooking up the Handler

Step 4: Implementing the Core Logic

Step 5: A Few Tweaks

Polishing the Pseudo Infinite Effect

Making it Auto Rotate

Initializing the Widget

The Final Code

Conclusion

Enjoyed this Post?

By Siddharth

Hello!

Premium Members

Full-time, Part-time and Contract Jobs

Freelance Jobs

Follow Nettuts+ and Tuts+ on Twitter