jquery cycle plugin

‹‹ home jQuery Cycle Plugin

Download the Cycle Plugin

Cycle Chatter (@malsup )

Join the conversation

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

shuffle	zoom	fade
turnDown	curtainX	scrollRight (click)

Images are used in these demos because they look cool, but slideshows are not limited to images. You can use any element you want.

Browse Effects

Use the   Effects Browser   page to preview the available effects.

See More Demos and Examples

• Super Basic Demo   (view source for details)
• Beginner Demos
• Intermediate Demos (Part 1)
• Intermediate Demos (Part 2)
• Advanced Demos (Part 1)
• Advanced Demos (Part 2)
• Even More Demos   (lots of additinal demos can be found here)

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? I wanted support for a few extra features like pause-on-hover, auto-fit, stopping the slideshow, and using the Metadata Plugin. And once I saw Benjamin Sterling's   jqShuffle Plugin   I really wanted to add that effect to. Many thanks to Ben for letting me do so!!