Automatic, infinite carousel with only five lines of code
1. Create an unordered list, each with an image inside
2. Animate the overall position of the list
3. Place the first list item after the last item to make and endless loop.
At the most basic level, a carousel is simply a list of images that are scrolled inside a window so that the user can only see the image currently behind the window. The practicalities of achieving this are challenging until you consider the overflow: hidden property offered by CSS, and taking advantage of this we only need a simple unordered list inside a <div> drom a structural point of view. Each list item is set to float left and the unordered list is set to be wide enough to accommodate all the list items.
Finally, the <div> is set to overflow:hidden so that you can only see one list item at a time. Add to this some jQuery code to move the entire unordered list to the left periodically, and shift the first item in the list to the end of the list. This creates a never-eneding carousel of rotating images to give your site a nice sense of movement.
$(document).ready(function(){
$("#carousel ul").each(function(){
// Set the interval to be 10 seconds
var t = setInterval(function(){
$("#carousel ul").animate({marginLeft:-300},1000,function(){
// This code runs after the animation completes
$(this).find("li:last").after($(this).find("li:first"));
// Now we've taken out the left-most list item, reset the margin
$(this).css({marginLeft:0});
})
},10000);
});
});
The above code is what will create the animation for us. We have to define our images and what not. So if you like, copy and paste the code below to get your HTML and just modify the image locations and have some fun 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
body {
font-family: arial;
font-size: 62.5%;
color: white;
}
#li1 {
background: green;
}
#li2 {
background: purple;
}
#li3 {
background: pink;
}
#carousel {
width: 300px;
overflow: hidden;
}
#carousel ul {
width: 1000px;
margin: 0;
padding: 0;
}
#carousel ul li {
width: 300px;
text-align: center;
height: 300px;
padding: 0;
list-style: none;
margin: 0;
float: left;
}
</style>
<script src="jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#carousel ul").each(function(){
// Set the interval to be 10 seconds
var t = setInterval(function(){
$("#carousel ul").animate({marginLeft:-300},1000,function(){
// This code runs after the animation completes
$(this).find("li:last").after($(this).find("li:first"));
// Now we've taken out the left-most list item, reset the margin
$(this).css({marginLeft:0});
})
},10000);
});
});
</script>
</head>
<body>
<div id="carousel">
<ul>
<li id="li1"><h1>Image One</h1></li>
<li id="li2"><h2>Image Two</h2></li>
<li id="li3"><h3>Image Three</h3></li>
</ul>
</div>
</body>
</html>
Cheers,
Josh
Geez man, your code blew my carousel code out of the water (you can check it out here: http://www.onextrapixel.com/2010/10/05/spice-up-your-galleries-with-jquery-clickcarousel-plugin/)
I’m extremely impressed with how simple and effective your thought process was. I also have never seen setInterval until now. Really, thanks a lot for this.
One note, though: Why do you need that .each? The only reason why it would be needed is if you had more than one carousel going on a given page.
I’m extremely happy to have found your blog Josh.
Thanks for the great feedback Joseph. I added the .each simply to demonstrate the simplicity of having additional carousels. Imaging if you wanted a single portfolio page of “still life, people, landscape” or something like that. It would be so sick to have it all on one page. At least that was the thought