Learn it fast with expert-taught software and skills training at lynda.com. See what you can learn

By Chris Converse | Wednesday, June 25, 2014

Create a jQuery Carousel for Images

Displaying a series of photographs and images within a small area of a site can be challenging. The goal is to give folks a sense of the image while providing a navigation scheme to get a sense of the other images. Though this technique may be referred to as a carousel, or slider, the effect is the same.

A more literal navigation system for an image carousel is to align a series of images in a circle. This gives the user an interesting navigation experience in addition to getting a glimpse of the total number of images available.

figure_1_carousel-WEB

See a demo

Interact with a working demo of the figure above.

Depending on how the navigation is developed, users can use arrows to spin the carousel, or simply click on an image to spin that image to the front.

Using carousel plug-ins

When working with interactive layouts that contain circles, especially in perspective, the scripts can involve quite a bit of advanced mathematics. Fortunately, there are a series of free and commercial jQuery-based plug-ins that can take care of the heavy listing. This means that you can focus specifically on your imagery and layout, and the plug-ins can do the rest.

figure_2_carousel_markup-WEB

In the figure above, you can see how only a small amount of HTML is required to create a rather advanced user experience. In addition to the HTML, a single line of jQuery needs to be added to your HTML file that will activate, or “attach,” to the div container which holds your images. With these pieces in place, the plug-in goes to work by creating a virtual circle, resizing the images, and positioning them along the virtual path.

Watch a video

See a demonstration of just how little jQuery is needed to create the HTML markup and activate a carousel plug-in.

Using jQuery plug-ins

As mentioned before, some of these scripts can be pretty math intensive. Here are 10 popular jQuery carousel plug-ins that can give you the user experience you’re after.

Learn it from the experts.

With online video courses at lynda.com, you can reach your goals faster. Learn software, improve your skills, and get an inside look at how the professionals work.

See what you can learn


Share this article:

Tags: , , , , ,

Get the latest news

  •   New course releases
  •   Pro tips and tricks
  •   News and updates
  
New releases submit clicked

You can change your email preferences at any time. We will never sell your email. More info

Featured articles

A lynda.com membership includes:

Unlimited access to thousands of courses in our library
Certificates of completion
New courses added every week (almost every day!)
Course history to track your progress
Downloadable practice files
Playlists and bookmarks to organize your learning
Become a member

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.