Time for action – adding the slideshow

Follow these steps to set up the slideshow component of our carousel/slideshow combo:

1. As usual, we'll get started with the HTML markup for our slideshow. Since we want the slideshow to be visible above the carousel, we'll place the slideshow into the code before the carousel code. Everything will work just fine if you choose to do things the other way around. Here's the HTML structure for the slideshow:

   <div id="slideshow">
     <div class="cycle-slideshow">
       <div data-cycle-title="Agua Azul" data-cycle-desc="Tumbal&aacute;, Chiapas, Mexico"><img src="images/AguaAzul.jpg"></div>
       <div data-cycle-title="Burney Falls" data-cycle-desc="Shasta County, California, USA"><img src="images/BurneyFalls.jpg"></div>
       <div data-cycle-title="Deer Leap Falls" data-cycle-desc="Dingmans Ferry, Pennsylvania, USA"><img src="images/Deer_Leap_Falls.jpg"></div>
       ...
     </div>
   </div>

   We...