O'Reilly logo

jQuery for Designers Beginner's Guide by Natalie MacLees

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required