O'Reilly logo

jQuery for Designers : Beginner's Guide - Second Edition 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 – connecting the carousel and the slider

Follow these steps to connect the carousel and the slider:

  1. We've done a lot so far with Cycle2 without writing much jQuery to make it all happen. We've finally found something we want to do with Cycle2 that will require us to write a few lines of jQuery. We want to load the full-size image in the slideshow when our site visitor clicks on the thumbnail in the carousel. So we'll get started with scripts.js by selecting all the slides in the carousel. Add the code to select those inside the document ready method, after the bit of code that we're using to change the <body> class:
    $(document).ready(function(){
      $('body').removeClass('jsOff').addClass('jsOn');
    
      $('#carousel .cycle-slide');
    });

    This ...

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