Slider Revolution WP
08.22.2016
How to Setup a “revapi” variable to use the slider’s API
This article will discuss how you can adjust your slider's JavaScript settings to use the slider's API.
1. Toward the bottom of your slider's HTML markup, you'll find the slider's JavaScript settings. It will look similar to the following code:
|
1 2 3 4 5 6 7 8 9 10 11 |
jQuery(document).ready(function() { jQuery('.tp-banner').show().revolution( { dottedOverlay:"none", delay:16000, startwidth:1170, startheight:700, hideThumbs:200, |
2. Declare a variable named "revapi", and then assign it to the slider as shown in the following example.
|
1 2 3 4 5 6 7 8 9 10 11 |
jQuery(document).ready(function() { var revapi = jQuery('.tp-banner').show().revolution( { dottedOverlay:"none", delay:16000, startwidth:1170, startheight:700, hideThumbs:200, |
3. Now that the "revapi" variable has been assigned to the slider, it can be used for any of the slider's API methods or events.
|
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 45 46 47 48 49 50 51 52 |
jQuery(document).ready(function() { var revapi = jQuery('.tp-banner').show().revolution( { dottedOverlay:"none", delay:16000, startwidth:1170, startheight:700, hideThumbs:200 }); // event for when slider has been loaded revapi.on('revolution.slide.onloaded', function() { // slider loaded }); // event for when slide is changed revapi.on('revolution.slide.onchange', function(e, data) { // slider changed var currentSlideNumber = data.slideIndex; }); // additional methods and data from the slider's API jQuery('.some-element-class-name').on('click', function() { // pause slider revapi.revpause(); // resume slider revapi.revresume(); // go to previous slide revapi.revprev(); // go to next slide revapi.revnext(); // go to specific slide revapi.revshowslide(2); // get total number of slides revapi.revmaxslide(); }); }); //ready |
