jQuery for Designers Beginner's Guide

Time for action – creating a thumbnail slideshow

Setting up the carousel thumbnail slideshow will be the trickiest thing we've done with jCarousel yet. But don't worry, we'll take it one step at a time.

1. I bet you can guess how we're going to get started, can't you? That's right, by setting up our simple HTML file and associated files and folders, just as we did in Chapter 1, Designer, Meet jQuery. In this case, we want just a simple list of thumbnails that are linked to the full-size version of the image. And we're going to wrap that up in a <div> for styling purposes. Here's what my list looks like:

   <div class="jcarousel-skin-slideshow"> <ul id="thumb-carousel"> <li><a href="images/600/Switzerland.jpg"><img src="images/small/Switzerland.jpg" alt="Switzerland"/></a></li> ...