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 - http://help.dimsemenov.com/discussions/royalslider-wordpress/5102-p...

Found a mistake in article? Know how to improve it? Please open support ticket.