Book Image

jQuery for Designers Beginner's Guide Second Edition

By : Natalie Maclees
Book Image

jQuery for Designers Beginner's Guide Second Edition

By: Natalie Maclees

Overview of this book

Table of Contents (21 chapters)
jQuery for Designers Beginner's Guide Second Edition
Credits
About the Author
Acknowledgments
About the Reviewers
www.PacktPub.com
Preface
Index

Time for action – creating the carousel controller


Follow these steps to create a Cycle2 carousel that can act as a controller for a slideshow:

  1. First, we'll create the carousel. Once we have that on the page and it's functioning, we'll add the slideshow and then connect them together.

    Here's the HTML markup we'll use for the slideshow:

    <div id="carousel">
      <div class="cycle-slideshow">
        <div>
          <a href="images/AguaAzul.jpg">
            <img src="images/AguaAzul-thumb.jpg" width="140" height="100">
          </a>
        </div>
        <div>
          <a href="images/BurneyFalls.jpg">
            <img src="images/BurneyFalls-thumb.jpg" width="140" height="100">
          </a>
        </div>
        <div>
          <a href="images/Deer_Leap_Falls.jpg">
            <img src="images/Deer_Leap_Falls-thumb.jpg" width="140" height="100">
          </a>
        </div>
        </div>
    </div>

    We'll wrap the entire slideshow in a <div...