jQuery for Designers Beginner's Guide

Time for action – adding the slideshow

The jCarousel plugin has taken care of setting up the carousel for us, but we want to get fancy and also add a slideshow area.

1. We're on our own here, so we'll create a separate function for creating the slideshow area. Then we'll call the new function inside our document ready statement:

   function slideshowInit() {
     // Slideshow setup goes here
   }
   
   $(document).ready(function(){
     slideshowInit();
     $('#thumb-carousel').jcarousel({
       scroll: 6,
       wrap: 'circular'
     });
   });

2. First up, we'll wrap a container around our thumbnail list to create the slideshow area. We find ourselves already in need of referring to the thumbnail list again, so let's store a reference to it in a variable and update the call to the jcarousel() method ...