Chris Converse |
Wednesday, June 25, 2014
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.
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.
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.
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.
See a demonstration of just how little jQuery is needed to create the HTML markup and activate a carousel plug-in.
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.
Check out these popular Web courses.
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:
Keep up with news, tips, and latest courses with emails from lynda.com.
We've updated our terms and conditions (now called terms of service).Go Review and accept our updated terms of service.