‹‹ Full Cycle PluginjQuery Cycle Lite Plugin

Overview

The jQuery Cycle Lite Plugin is a lighter version of the Cycle Plugin. The Lite version is optimized for file size and supports only fade transitions. It also supports pause-on-hover, auto-fit, before/after callbacks, and click triggers. And additionally, it supports, but does not require, the Metadata 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

default

click triggers

callbacks
    
$('#slideshow1').cycle()
 
$('#slideshow2').cycle({
    prev:   '#prev',
    next:   '#next',
    timeout: 0
});
Panama City Heading to the water Danny 
$('#slideshow3').cycle({
    delay:  2000,
    speed:  500,
    before: onBefore
});

function onBefore() {
    $('#title')
        .html(this.alt);
};

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

Options

The Cycle Lite Plugin provides a few 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. 

$.fn.cycle.defaults = {
    timeout:       4000,  // milliseconds between slide transitions (0 to disable auto advance)
    speed:         1000,  // speed of the transition (any valid fx speed value)
    next:          null,  // id of element to use as click trigger for next slide
    prev:          null,  // id of element to use as click trigger for previous slide
    before:        null,  // transition callback (scope set to element to be shown)
    after:         null,  // transition callback (scope set to element that was shown)
    height:       'auto', // container height
    sync:          1,     // true if in/out transitions should occur simultaneously
    fit:           0,     // force slides to fit container
    pause:         0,     // true to enable "pause on hover"
    delay:         0,     // additional delay (in ms) for first transition (hint: can be negative)
    slideExpr:     null,  // expression for selecting slides (if something other than all children is required)
};

Download