Time for action – building a slideshow with Cycle2

Follow these steps to build your first Cycle2 slideshow:

1. We'll get started by creating a basic HTML document and associated files and folders just like we did in Chapter 1, Designer, Meet jQuery. In the body of the HTML document, we'll create a container <div> and then wrap the markup for each slide in a <div>:

   <div class="cycle-slideshow">
     <div class="slide">
       <a href="http://en.wikipedia.org/wiki/Agua_Azul">
         <img src="images/AguaAzul.jpg">
       </a>
     </div>
     <div class="slide">
       <a href="http://en.wikipedia.org/wiki/Burney_Falls">
         <img src="images/BurneyFalls.jpg">
       </a>
     </div>
     ...
   </div>

   Notice that we've used a class cycle-slideshow on the container <div> and then a class slide on the <div> elements that contain the markup for each of our individual slides. These are important for the Cycle2 plugin. Remember that this...