jQuery for Designers Beginner's Guide

Time for action – building a CrossSlide slideshow

Follow these steps to set up a CrossSlide slideshow:

1. To get started, we'll set up a simple HTML document and associated files and folders just like we did in Chapter 1, Designer, Meet jQuery. The body of the HTML document will contain a container for your slideshow. Inside the container, place any content you'd like to display for users with JavaScript disabled.

   <div id="slideshow">
     <img src="images/600/AguaAzul.jpg" alt="Agua Azul"/>
   </div>

   I'm going to simply show the first photo from the slideshow for users with JavaScript disabled. I've given my container <div> an id of slideshow.

2. Open styles.css and add some CSS to define the width and height of the slideshow:

   #slideshow { width:600px;height:400px; ...