Creating play/pause button
-
Initialize slider as usual (autoStart variable is self descriptive):
var autoStart = true; $('#your-slider-id').royalSlider({ // other options... autoPlay: { enabled: autoStart } });
-
Add HTML code of button to your page, anywhere you wish.
<button id="toggleAutoPlayBtn">Pause</button>
-
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.