O'Reilly logo

Instant jQuery Boilerplate for Plugins by Jonathan Fielding

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

Writing a carousel with jQuery Boilerplate (Intermediate)

Carousels are very common across many websites, and being a web developer, it is essential you know how to code one.

Getting Ready

Before you get started with your carousel, you will need to find yourself five images of the same size to be your carousel content. These can be anything, from simple images numbered 1 to 5 (as I will be using) to photos of friends or family.

We will once again use the template that we previously set up.

How to do it...

  1. We will start by setting up the HTML for our carousel. This will simply consist of an unordered list within a carousel div wrapper. Each of the list items is populated with the images that you have selected to use inside your carousel:
    <div class="carousel"> ...

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