Overview

The jQuery Cycle Lite Plugin is a lighter version of the Cycle Plugin. The Lite version is optimized for file size and includes only a fade transition (though other transition effects can be created using options). It also supports pause-on-hover, auto-fit, before/after callbacks, click triggers and adjustable timeouts and transition speeds.

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

custom transition

prev next

$('#slideshow1').cycle()

$('#slideshow2').cycle({
    prev:   '#prev',
    next:   '#next',
    timeout: 0
});

$('#slideshow3').cycle({
    delay:  2000,
    speed:  500,
    before: onBefore
});

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

$('#slideshow4').cycle({
  fx: 'custom',
  cssBefore: { top: 232 },
  animIn:  { top: 0 },
  animOut: { top: -232 }
});

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 = {
    after:         null,   // transition callback (scope set to element that was shown)
    before:        null,   // transition callback (scope set to element to be shown)
    delay:         0,      // additional delay (in ms) for first transition (hint: can be negative)
    fit:           0,      // force slides to fit container
    fx:           'fade',  // name of transition function
    height:       'auto',  // container height
	metaAttr:     'cycle', // data- attribute that holds the option data for the slideshow
    next:          null,   // id of element to use as click trigger for next slide
    pause:         0,      // true to enable "pause on hover"
    prev:          null,   // id of element to use as click trigger for previous slide
    timeout:       4000,   // milliseconds between slide transitions (0 to disable auto advance)
    speed:         1000,   // speed of the transition (any valid fx speed value)
    slideExpr:     null,   // expression for selecting slides (if something other than all children is required)
    sync:          1,      // true if in/out transitions should occur simultaneously

    // the following options let you create transitions other than fade
	cssBefore:     {},     // properties that define the initial state of the slide before transitioning in
	cssAfter:      {},     // properties that defined the state of the slide after transitioning out
	animIn:        {},     // properties that define how the slide animates in
	animOut:       {}      // properties that define how the slide animates out
};

Download

jQuery Cycle Lite Plugin (8 KB)

‹‹ Full Cycle PluginjQuery Cycle Lite Plugin