‹‹ homejQuery Cycle Plugin

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

$('#shuffle').cycle({
    fx:     'shuffle',
    easing: 'backout',
    delay:  -4000
});

zoom

$('#zoom').cycle({
    fx:    'zoom',
    delay: -2000
});

fade

$('#fade').cycle();

turnDown

$('#slide').cycle({
    fx:      'turnDown',
    delay:   -4000
});

curtainX

$('#up').cycle({
    fx:    'curtainX',
    sync:  false,
    delay: -2000
 });

scrollRight (click)

$('#right').cycle({
    fx:      'scrollRight',
    click:   '#right',
    timeout:  0,
    easing:  'backinout'
});

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

See More Demos and Examples

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!!