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.
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' }); });
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 as follows:var thumbs = $('#thumb-carousel'); function slideshowInit() { // Slideshow setup goes here } $(document).ready(function(){ slideshowInit(); thumbs.jcarousel({ scroll: 6, wrap: 'circular' }); });
Next...