I am testing some new stuff on responsive sliders, and I got stranded on something while using this plugin: /

Can anyone help me on how to create a start/stop function for the slider? I want to have a start/stop option, to control if the slider is automatically switching between slides or paused, giving the user a bit more control.

The only option available in the slider yet is to start/stop on hover. I need it to start/stop when I click a custom element in the DOM.

I am testing some new stuff on responsive sliders, and I got stranded on something while using this plugin: http://responsiveslides./

Can anyone help me on how to create a start/stop function for the slider? I want to have a start/stop option, to control if the slider is automatically switching between slides or paused, giving the user a bit more control.

The only option available in the slider yet is to start/stop on hover. I need it to start/stop when I click a custom element in the DOM.

• javascript
• jquery

4 Answers 4

you will need to add some code to the plugin.

First, create a variable named forcePause:

    fadeTime = parseFloat(settings.speed),
    waitTime = parseFloat(settings.timeout),
    maxw = parseFloat(settings.maxwidth),
    forcePause = false, // <---- here!

In the restartCycle method you need to check if the paused is forced or not:

   restartCycle = function () {
      if (settings.auto) {
        // Stop
        clearInterval(rotate);
        if ( !forcePause ) // new line
          // Restart
          startCycle();
      }
    };

After that, you can add something like that in the line 300:

    $( '.pause_slider' ).click( function( e ){
      e.preventDefault();
      forcePause = true;
      $( this ).hide()
      $( '.play_slider' ).show();
      clearInterval(rotate);
    });

    $( '.play_slider' ).click( function( e ) {
      e.preventDefault();
      forcePause = false;
      $( this ).hide();
      $( '.pause_slider' ).show();
      restartCycle();
    });

You will need two HTML elements with each class to do his work. The forcePause avoid to restart de slider after hovering it.

I know it's not the best solution ever, but it does the trick.

You can see it working here: http://jsbin./eHaHEVuN/1/

Also you will find the code. :) I hope this works for you.

Control start/stop with pause parameter:

$(".rslides").responsiveSlides({
      auto: true,             // Boolean: Animate automatically, true or false
      speed: 500,            // Integer: Speed of the transition, in milliseconds
      timeout: 4000,          // Integer: Time between slide transitions, in milliseconds
      pager: false,           // Boolean: Show pager, true or false
      nav: false,             // Boolean: Show navigation, true or false
      random: false,          // Boolean: Randomize the order of the slides, true or false
      pause: true,           // Boolean: Pause on hover, true or false
      pauseControls: true,    // Boolean: Pause when hovering controls, true or false
      prevText: "Previous",   // String: Text for the "previous" button
      nextText: "Next",       // String: Text for the "next" button
      maxwidth: "",           // Integer: Max-width of the slideshow, in pixels
      navContainer: "",       // Selector: Where controls should be appended to, default is after the 'ul'
      manualControls: "",     // Selector: Declare custom pager navigation
      namespace: "rslides",   // String: Change the default namespace used
      before: function(){},   // Function: Before callback
      after: function(){}     // Function: After callback
    });

There's another simple solution - enable pause on hover, then emulate hover:

JS:

$(".rslides").responsiveSlides({
  pause: true
});

$('.carousel-pause .pause').click(function(e){
  $(this).hide();
  $('.play').show();
  $('.rslides').trigger('mouseenter');
});

$('.carousel-pause .play').click(function(e){
  $(this).hide();
  $('.pause').show();
  $('.rslides').trigger('mouseleave');
});

HTML:

<div class="carousel-pause">
  <span class="pause">Pause</span>
  <span class="play">Play</span>
</div>

Built off of answer from @miduga to get solution tailored to allow external events to pause slide show.

I ended up creating a global variable of window.responsiveSlidesForcePause that is used in the rotate interval to determine if rotate should occur. Ideally, there should be a public method that pauses the individual slideshow, but this is a quick hack that will pause any slideshow on the page. My situation only needed a single slideshow on a page that will have a short lifespan.

http://jsfiddle/egeis/wt6ycgL0/

Initialize global variable:

return this.each(function () {

    // Index for namespacing
    i++;

    window.responsiveSlidesForcePause = false; // new global variable

    var $this = $(this),

Use global variable:

startCycle = function () {
    rotate = setInterval(function () {
        if (!window.responsiveSlidesForcePause) { // new if statement

            // Clear the event queue
            $slide.stop(true, true);

            var idx = index + 1 < length ? index + 1 : 0;

            // Remove active state and set new if pager is set
            if (settings.pager || settings.manualControls) {
                selectTab(idx);
            }

            slideTo(idx);
        }
    }, waitTime);
};

Which allows the events that pause the slideshow to be outside the actual plugin.

$(document).ready(function() {
    $( "#slider" ).responsiveSlides({ nav: true, prevText: '', nextText: '' });
    $( ".pause_slider" ).on("click", function (e) {
        e.preventDefault();
        $(this).hide();
        $( '.play_slider' ).show();
        window.responsiveSlidesForcePause = true;
    });
    $( '.play_slider' ).click( function(e) {
        e.preventDefault();
        $( this ).hide();
        $( '.pause_slider' ).show();
        window.responsiveSlidesForcePause = false;
    });    
});