There are two ways to use Cycle's command API, programatically and declaratively.

Programmatic Commands

When invoking a Cycle command programatically you pass a command string to the cycle function. For example, to pause a slideshow you would issue the pause command:


To resume the slideshow you would issue the resume command:


Declarative Commands

Cycle will issue commands to slideshows automatically for any element that contains the data-cycle-cmd attribute. For example, you could have a button element that pauses your slideshow using markup like this:

<button data-cycle-cmd="pause">Pause</button>

By default, when this button is clicked it will issue a the pause command using the following code:


If your slideshow does not have the class cycle-slideshow, or if you have multiple slideshows on your page, you can use the data-cycle-context attribute to fine-tune the selector. For example:

<button data-cycle-cmd="pause" data-cycle-context="#slideshow">Pause</button>

The markup above would auto-generate and execute the following code when the button is clicked:



Cycle's log output is displayed below (most recent entries on top):

The full list of supported commands can be found on the API page.