O'Reilly logo

jQuery for Designers Beginner's Guide by Natalie MacLees

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required