Pause and Play Buttons for jQuery Slideshow

Continuing our slideshow journey with jQuery Cycle plugin, we’d like to improve our slider by adding two more buttons. Last time we looked at creating a slideshow with previous and next buttons, but now we’d like to add buttons for pause and resume. It would be nice to allow site visitors to stop a slideshow with a pause button and resume the slideshow with a play button whenever they’re ready to continue.

If we keep the overall design the same, we just need to do two things to modify the slider. First, we need to upload the images for the pause and resume buttons and add a couple of lines to the HTML markup for positioning the buttons. We’ll fit the pause and play buttons in between the previous and next buttons. Each button will use an anchor tag, an id for CSS and script targeting, and a title for a user-friendly tooltip.

HTML Markup for Slideshow Controls:

[plain]

[/plain]

Second, we need to add a couple of lines to the script to manage the action when someone clicks either button. Here, we’re assigning Cycle’s pause or resume option to the click function of the selected id, in this case #slide_aft. Adding a ‘return false’ line assures that the site visitor won’t be taken to another page when the buttons are clicked.

jQuery script portion for pause and resume buttons:

[crayon]

$(‘#pauseButton’).click(function() {
$(‘#slide_aft’).cycle(‘pause’);
return false;
});
$(‘#resumeButton’).click(function() {
$(‘#slide_aft’).cycle(‘resume’);
return false;
});

[/crayon]

The above script portion was placed in the document.ready function($) so that the buttons are able to be used as soon as practical.

Here’s the full slideshow example with button controls for pause, resume or play, previous slide, and next slide.

Now, that looks a little better. This slideshow looks more complete having the pause and play or resume buttons, as well as the prev and next buttons.