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 — activating the Next and Previous Buttons

Next up, we'll get those next and previous buttons around the image working so that the site visitor can easily flip through all the images.

  1. Just like when we hooked up external controls to the carousel in the last example, we'll get started by setting up a callback function for the carousel. We'll call the function nextPrev and set it up as follows:
    function nextPrev(carousel) {
    }
    thumbs.jcarousel({
    scroll: 6,
    wrap: 'circular',
    initCallback: nextPrev
    });
    

    Now the nextPrev function will be called when the carousel is initialized.

  2. Inside the nextPrev() function, we'll select the previous button and bind a function to the click event:
    function nextPrev(carousel) { $('#slideshow-prev').bind('click', ...

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