Stop and start jQuery SlideShow

Question

I am using jQuery Cycle plugin to create an image slideshow. Now what I want to do is, say suppose I have 10 images in a container div for which I want to have the slideshow, now I want to stop that slideshow on a button click and restart it again on start button click. My code goes like this,

$("#startbtn").click(function()
{
    $("#slideshow").cycle({fx: 'fade', timeout: 500});
});
$("#stopbtn").click(function()
{
    $("#slideshow").cycle('stop');
});

I click stop button to stop the slide show. Now when I want to start my slideshow again I press the start button, now the funny thing is that the slideshow starts but only the first slide, rather first element of the container div goes through the transition and the slideshow just stops automatically, without any errors.

Jason Weber Jason Weber · Accepted Answer · 2012-01-31T17:15:25

If you go to the Jquery Cycle Demo it explains near the bottom of the page how to manually adjust your stop/start settings:

Quote:

Stopping a Slideshow

If you need to stop a running slideshow you can pass the string 'stop' to the cycle method.

$('#slideshow').cycle('stop');

Manually Pausing a Slideshow

If you need to pause/resume a running slideshow you can pass the string 'pause' or 'resume' to the cycle method.

$('#slideshow').cycle('pause');

If you're still having trouble, all of those configurations are editable in your jquery.cycle.all.js (or the minified version, whichever), near the bottom. So underneath the code:

  // override these globally if you like (they are all optional)
  $.fn.cycle.defaults = {

at the bottom, you can tailor the cycle plugin to suit your needs. Pay close attention to these within the configuration:

    autostop: 0, // true to end slideshow after X transitions (where X == slide
    count)
    autostopCount: 0, // number of transitions (optionally used with autostop to 
    define
    X)
    manualTrump:   true,  // causes manual transition to stop an active transition 
    instead of being ignored

Stop and start jQuery SlideShow

1 Answers