O'Reilly logo

jQuery for Designers : Beginner's Guide - Second Edition 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 Basic Slider

Follow these steps to create a slider using the Basic Slider plugin:

  1. We'll get started by writing our HTML markup. Looking at the documentation for the Basic Slider plugin, we see that the plugin requires an unordered list wrapped in a <div> element. Each of our slides is going to contain a photo with a headline overlay, and each slide is going to link to pages with more information about what's contained in that slide. Here's what our markup looks like:
    <div id="slider"> <ul class="bjqs"> <li> <a href="http://en.wikipedia.org/wiki/Agua_Azul"> <img src="images/AguaAzul.jpg"> <div class="headline"> <h2>Agua Azul</h2> <p>Tumbal&aacute;, Chiapas, Mexico</p> </div> </a> </li> <li> <a href="http://en.wikipedia.org/wiki/Burney_Falls"> ...

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