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...