Time for action – creating the carousel controller
Follow these steps to create a Cycle2 carousel that can act as a controller for a slideshow:
First, we'll create the carousel. Once we have that on the page and it's functioning, we'll add the slideshow and then connect them together.
Here's the HTML markup we'll use for the slideshow:
<div id="carousel"> <div class="cycle-slideshow"> <div> <a href="images/AguaAzul.jpg"> <img src="images/AguaAzul-thumb.jpg" width="140" height="100"> </a> </div> <div> <a href="images/BurneyFalls.jpg"> <img src="images/BurneyFalls-thumb.jpg" width="140" height="100"> </a> </div> <div> <a href="images/Deer_Leap_Falls.jpg"> <img src="images/Deer_Leap_Falls-thumb.jpg" width="140" height="100"> </a> </div> </div> </div>
We'll wrap the entire slideshow in a
<div...