Follow these steps to connect the carousel and the slider:
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 little bit of code won't change anything on our page, but now we've got all the thumbnails in the carousel and we can work with them. The
cycle-slide
class is added to each individual slide in a slideshow by the Cycle2 plugin.We want the...