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:
$('.cycle-slideshow').cycle('pause');
To resume the slideshow you would issue the resume
command:
$('.cycle-slideshow').cycle('resume');
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:
$('.cycle-slideshow').cycle('pause');
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:
$('#slideshow').cycle('pause');
Example
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.