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

Get jQuery for Designers Beginner's Guide now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.