Overview

The jQuery Cycle Plugin is a lightweight slideshow plugin. Its implementation is based on the InnerFade Plugin by Torsten Baldes, the Slideshow Plugin by Matt Oakes, and the jqShuffle Plugin by Benjamin Sterling. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and many transition effects. It also supports, but does not require, the Metadata Plugin and the Easing Plugin.

How it Works

The plugin provides a method called cycle which is invoked on a container element. Each child element of the container becomes a “slide”. Options control how and when the slides are transitioned.

Demos

Check jQuery Cycle Here in Action!

See More Demos and Examples

• Beginner Demos
• Intermediate Demos (Part 1)
• Intermediate Demos (Part 2)
• Advanced Demos (Part 1)
• Advanced Demos (Part 2)
• Even More Demos (of the “miscellaneous” variety)

Options

The Cycle Plugin provides many options for customizing your slideshow. The default option values can be overridden by passing an option object to the cycle method, by using metadata on the container element, or by redefining the values in your own code. For more about options, see the Options Reference page.

But Why?

Why another slideshow implementation? Malsup wanted support for a few extra features like pause-on-hover, auto-fit, stopping the slideshow, and using the Metadata Plugin. And once they saw Benjamin Sterling’s jqShuffle Plugin they really wanted to add that effect to. Many thanks to Ben for letting them do so!!