Slider Revolution WP
09.27.2016
API Example: Adding a Play/Pause Button
This article is now outdated!
For version 5.0+, this can now be easily achieved with Static Layers and Actions.
This example covers how you can add a “Play/Pause” button to the slider.
Click here for an alternative example for how this can be accomplished.
The post is a continuation of the the first API tutorial which can be found here:
https://www.themepunch.com/home/plugins/wordpress-plugins/revolution-slider-wordpress/api-tutorial/
This following code snippets include custom CSS and JavaScript.
The API methods used in this example are “revpause()” and “revresume()”.
Part One: CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
/* play/pause container */ .prefix-play-pause { position: absolute; bottom: 20px; left: 50%; margin-left: -10px; cursor: pointer; display: inline-block; z-index: 9999; } /* play/pause mouse-over state */ .prefix-play-pause:hover { opacity: 0.75; } /* play button */ .prefix-play { width: 32px; height: 32px; background: url(http://www.yoursite.com/play_pause/play.png) no-repeat; display: none; } /* pause buttons */ .prefix-pause { width: 32px; height: 32px; background: url(http://www.yoursite.com/play_pause/pause.png) no-repeat; } |
Part Two: JAVASCRIPT
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
(function() { // if your slider is meant to autoplay, set this to true // otherwise, if you've turned on the "Stop Slider" option .. // .. in the slider's admin, set this to false var autoplay = true; // change "revapi" to whatever api name is being used for your slider var mySlider = revapi1; var isPlaying = autoplay, // play/pause container that will hold each button playPause = jQuery(' |
|
1 2 3 4 5 6 |
'), // play button play = jQuery(' |
|
1 2 3 4 5 6 |
').appendTo(playPause), // pause button pause = jQuery(' |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
').appendTo(playPause); // toggle button visibility if autoplay is set to false if(!autoplay) { pause.hide(); play.show(); } // attach click handler to playPause container playPause.on('click', function() { if(isPlaying) { pause.hide(); play.show(); // ********************************* // API method for pausing the slider // ********************************* mySlider.revpause(); } else { play.hide(); pause.show(); // ********************************* // API method for playing the slider // ********************************* mySlider.revresume(); } isPlaying = !isPlaying; // append playPause container to slider }).appendTo(jQuery(mySlider).parent()); })(); |
