Web Development Recipes, 2nd Edition

Recipe 4

Creating Interactive Slideshows with jQuery

Problem

A few years ago, if you wanted to have an animated slideshow on your website, you’d probably create a Flash movie. Simple tools make this an easy process, but maintaining the photographs in the slideshow often means rebuilding the Flash movie. Additionally, many mobile devices don’t support Flash Player, so those users can’t see the slideshows at all. We need an alternative solution that works on multiple platforms and is easy to maintain.

Ingredients

• jQuery

• The Cycle2 jQuery plug-in^[9]

Solution

We can build a simple and elegant image slideshow using jQuery and the jQuery Cycle plug-in. This open-source tool will give our users a nice slideshow and only requires a browser with JavaScript ...