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:

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:

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.

one
two
three
four

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.

2 thoughts on “Pause and Play Buttons for jQuery Slideshow”

  1. Thank you for posting the pause and play slideshow script. I’m trying to get this to work on a client’s site and the pause and play buttons are not working (previous & next buttons do work.)

    Here is my cycle code:
    $('#slideshow').cycle({
    fx: 'fade',
    speed: '400',
    timeout: 5000,
    next: '#next2',
    prev: '#prev2'
    });
    $('#pauseButton').click(function() {
    $('#slideshow').cycle('pause');
    return false;
    });
    $('#resumeButton').click(function() {
    $('#slideshow').cycle('resume');
    return false;
    });

    Here is my navigation HTML:
       
       
       

    Thanks for your help,
    Robert

  2. Hi Robert,

    I’d like to help with your slideshow troubles, but I can’t see anything wrong with what you’ve posted here. The navigation HTML doesn’t look complete as posted, so double check the ids for all four buttons.

    Have you got this working? If not, please post more details and I’ll try to help.

Leave a Reply

Your email address will not be published. Required fields are marked *