Simple jQuery Image Carousel with Links

Here's a simple, lightweight, and modular rotating image carousel script with related links built using jQuery. The images and the directory they live in on are set in JavaScript variables at the top of the script for easy maintenance. Of course the rotation time can also be adjusted (it's currently set to 5000 milliseconds, which us mortals know as five seconds.) The links and the source of the first image are set in the actual HTML code so it degrades quite nicely. It also preloads the images so they rotate smoothly.

Get the code for this carousel on this example page (use view source)

In addition to setting the variables above, you'll also need to adjust the the height of the links in the CSS (and/or the height of your images) to get the borders to line up pixel perfect. In this example I'm also assuming that the link text can fit on a single line. If your links will need to break onto two or more lines you'll want to remove the line-height in the "links" selector and maybe just use the padding instead.

But overall this script is simple as pie. It's easily customized to match your styles and should be easy to implement on just about any site. If you like it, or have suggestions on how it might be improved, feel free to drop me an e-mail using the link above.

Lastly, be sure to set the width and height of the main carousel image tag to match your images.

This component has been tested in FireFox 3.5.8, Internet Explorer 7, and Safari 4.0.3. It displays fine in IE 6 too, but the animation may be a bit choppy.