‹‹ homejQuery Cycle Plugin

Check out Cycle2, the latest in the Cycle line of slideshows.

Overview

The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more. It also supports, but does not require, 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: 'easeOutBack',
    delay:  -4000
});

zoom

$('#zoom').cycle({
    fx:    'zoom',
	sync:  false,
    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',
    next:   '#right',
    timeout:  0,
    easing:  'easeInOutBack'
});

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

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.

FAQ

Frequently Asked Questions

Acknowledgements

Special thanks to Torsten Baldes, Matt Oakes, and Ben Sterling for the many ideas that got me started on writing Cycle in 2007.