Skip to main content

Creating play/pause button

  1. Initialize slider as usual (autoStart variable is self descriptive):

    var autoStart = true;
    $('#your-slider-id').royalSlider({
    // other options...
    autoPlay: {
    enabled: autoStart
    }
    });
  2. Add HTML code of button to your page, anywhere you wish.

    <button id="toggleAutoPlayBtn">Pause</button>
  3. After slider initialization, in document.ready() bind click event on button and call toggleAutoPlay function when it's clicked.

jQuery(document).ready(function($) {
// optionally put here slider initialization code from first step and define autoStart variable

$('#toggleAutoPlayBtn').click(function() {
// optionally change button text, style e.t.c.
if(autoStart) {
$(this).html('play');
} else {
$(this).html('pause');
}
autoStart = !autoStart;

$('#your-slider-id').royalSlider('toggleAutoPlay');
});

});

You may also use startAutoPlay and stopAutoPlay public methods.

If toggleAutoPlay function is not working:

  • make sure that autoplay module is included
  • make sure that you're using RoyalSlider 9.2.1 or higher (check version in main JS file).

If you're using WordPress version

Refer to this discussion - https://rshelp.dimsemenov.com/discussions/royalslider-wordpress/5102-playpause-button-code-for-wordpress