Previous and Next Buttons in a jQuery Cycle Slideshow

A site visitor to computeraxe wanted to know how to incorporate previous and next buttons in their slideshow using jQuery Cycle plugin. It’s easy! Let’s see an example, ok?

If you haven’t checked out the simplicity of the jQuery Cycle plugin, you should because there’s a whole lot you can do with it. It’s a very versatile plugin and quite popular, which speaks to its usefulness — and cool factor, too. Previous posts here covered the basics about the Cycle Plugin, how to make slides look like Polaroids, using image captions with Cycle, and discussions about a transition effects problem with certain fx.

Let’s get into the example for making previous and next buttons for a slider in jQuery using the Cycle plugin.

Before writing any code it would be a good idea to sketch out the design for the slideshow. The photos or slides will be held in a container div that can be targeted for CSS styling and javascript. Captions and their container paragraph would also be placed inside the container div. In this example we’ll do away with the captions for simplicity and place the previous and next buttons inside the container div.

It turns out that Cycle has two options for creating the functionality for going to the next photo or the previous slide in a sequence. These options are appropriately named ‘next’ and ‘prev’. The values to give for each are the locations of the next and previous buttons. To specify each location, create an id.

Here, we’re using #next2 for the next button and #prev2 for the previous button. Since we’re having only one next/previous button set for this slideshow, an id for each makes sense. If you have more than one slider on a page, a class would be more appropriate. When somebody wants to see the previous slide they’ll click on the ‘previous button’, so the best HTML tag for the slideshow controls is an anchor with a href of ‘#’. We don’t want to leave the page when clicking the previous button, we just want to see the previous slide in the show.

HTML Markup:

Slideshow example using jQuery Cycle plugin with previous and next buttons.

one two three four

We’ll use a couple of small images to accommodate the previous and next slide functionality. One could use the words ‘prev’ and ‘next’ instead of images, if desired. In case a site visitor needs help, we’ve included a tooltip for each button by the way of a title for each anchor.

We want to hide all the images except the first image whenever the document is ready. Else, we’ll use the window load function for the slider action.

jQuery:

Of course, there are many different ways to style your slideshow. Here’s our example Cycle slider with next and previous buttons.

Slideshow example using jQuery Cycle plugin with previous and next buttons.

one
two
three
four

What if you want two sliders on the same page?

The first thing to recognize is that more than one id with the same name won’t work on the same page, so parts of the document for the second slider with an id will have to be changed over to a class or a different id name. CSS will have to be updated to reflect the changes, as will the javascript.

However, using the same class names for the next and previous controls for two sliders on the same page will result in both sliders being controlled by the same set of control buttons. That’s probably not what you’d want, nor what your site visitors would expect. Rename the action buttons (prev, next) and the container for the slides to different class names in order to be able to control the second slideshow. Of course, a second Cycle script would be needed to target the new container for the second slideshow.

11 thoughts on “Previous and Next Buttons in a jQuery Cycle Slideshow”

  1. Hi,
    I have used above code for my practice, carousal is wprking fine but i m unable to get play and pause button.

    Please correct it.
    Here is code:-

    // jQuery Cycle options for slideshow with next/previous buttons
    $(window).load(function() {
    $(‘#slide_afta’).cycle({
    fx: ‘fade’,
    timeout: 4000,
    next: ‘#next2’,
    prev: ‘#prev2’,
    slideExpr: ‘img’
    });
    });

    jQuery(document).ready(function($) {

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

    Thanks,
    Mike

  2. Hello Mike,

    I don’t see any glaring errors in what you presented, so I’ll ask the obvious. Did you check for #resumeButton and #pauseButton in your CSS? Since you stated that you were “unable to get play and pause button” I wondered if the wrong id could have been used in the stylesheet. Also, the images are ‘there’ and positioned to be seen?

    Share the CSS if you like and good luck.

  3. What can be applied in the design of my own website?

    please answer my question ..

    thank you!

  4. Hey Jepara,
    I’d like to help you but your question has to be a little more specific. There’s no reason you can’t add jQuery to your site and pop up a nice slideshow to show off your furniture.
    Good luck!

  5. HI Mike,

    I just made a change ur code but i did n’t get any slide but get only images, can u make a chages below code .

    plz correct it.

    jQuery(document).ready(function($) {

    $(window).load(function() {
    $(‘#slide_afta’).cycle({
    fx: ‘fadeZoom’,
    timeout: 2000,
    next: ‘#next2’,
    prev: ‘#prev2’,
    slideExpr: ‘img’
    });
    });

    // hide all but the first image when document is ready
    });

    Slideshow example using jQuery Cycle plugin with previous and next buttons.



  6. Thanks for your input, Neveno. The window.load function should be outside of the document.ready function.

    @Mike, the problem may lie in the ‘ or ` that you’ve used in these lines:

    next: ‘#next2?,
    prev: ‘#prev2?,

    So, make sure the apostrophes match.

    Check that out and let us know if it works ok. Thanks.

  7. Hey Saiprasad,

    I’d like to help you, but what don’t you get about the post? If you have a specific question, please ask it. Thanks!

  8. I’ve been browsing online more than three hours today, yet I never found any interesting article like yours. It’s pretty worth enough for me.
    In my opinion, if all web owners and bloggers made good content as you did, the web will be much more useful
    than ever before.

Leave a Reply

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