Advanced API

The Cycle2 plugin has a rich set of functions which it invokes in order to initialize and run a slideshow. This API is fully customizable so that you can both replace existing implementation bits and also create new transition effects.

Methods

All API methods can be replaced with custom implementations by binding to the cycle-bootstrap event and replacing the appropriate property on the API object. Example:

$( '#mySlideshow' ).on( 'cycle-bootstrap', function( e, optionHash, API ) {
    // replace "advanceSlide" method with custom impl
    API.advanceSlide = function( numberOfPositions ) {
        // custom implementation
    }
});

It is also possible to retrieve the API object at any time by using the data method on the slideshow container.

var API = $( '#mySlideshow' ).data( 'cycle.API' );

function( slides )

function()

function( numberOfPositions )

function( slideOptionHash, slide )

function( slide )

function()

function()

function( slideOptions, manual )

function()

function( slideOptions, currEl, nextEl, fwdFlag, callback )

function( nameOfComponent )

function( slideElement )

function( slideIndex )

function( index )

function( slideOptions, slide, suggestedZindex )

function()

function( arg1, arg2, arg3, ... )

function()

function( pagerEl, targetEl )

function()

function()

function()

function( manualFlag, fwdFlag )

function()

function( slideOptions )

function()

function( slideIndexToRemove )

function()

function( currEl, nextEl, fwdFlag )

function()

function()

function( templateString, optionHash, slideEl )

function( eventName, args )

function()

Transitions API

Custom transitions are created by extending Cycle2's transitions object with an object that implements some or all of the transition API. For example:

$.fn.cycle.transitions.myNewTransition = {
    before: function( opts, curr, next, fwd ) {
        // assign properties to the opts object
    }
}

A transition's before function is invoked prior to starting a transition from one slide to the next. Typically defining the before function is adequate for defining a new transition effect, however you may also define any of the other functions described below.

Once a new transition is defined, it can be used by assigning it's name to Cycle2's fx option.

$('.cycle-slideshow').cycle({
    fx: 'myNewTransition'
});

The following table describes Cycle2's transition API:

function( slideOptions, currEl, nextEl, fwdFlag )

function( slideOptions, currEl, nextEl, fwdFlag )

function( optionHash )

function( optionHash )

function( optionHash )

function( slideOptions, currEl, nextEl, fwdFlag, callback )

Useful properties to set on the optionHash in the before method: