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:

Name	Description/Signature
after	Invoked after the transion has completed. function( slideOptions, currEl, nextEl, fwdFlag )
before	Invoked immediately before a transition is started. function( slideOptions, currEl, nextEl, fwdFlag )
postInit	Invoked once immeidately after the slideshow is initialized function( optionHash )
preInit	Invoked once immediately before the slideshow is initialized function( optionHash )
stopTransition	Invoked when a transition should be stopped immediately. function( optionHash )
transition	Invoked in order to perform the transition. This allows Cycle2's core transition logic to be completely overridden. function( slideOptions, currEl, nextEl, fwdFlag, callback ) The callback function MUST be invoked by the transition function.

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

Name	Type	Description
animIn	object hash	An object which defines css properties that should be applied to the slide as it is being animated in.
animOut	object hash	An object which defines css properties that should be applied to the slide as it is being animated out.
cssAfter	object hash	An object which defines css properties that should be applied to the slide immediately after it has animated out.
cssBefore	object hash	An object which defines css properties that should be applied to the slide immediately before it is animated in.