API Tutorial
Slider Revolution has several API methods that offer advanced users more control of the slider.
https://www.themepunch.com/revslider-doc/slider-settings/#api
The first step in using the slider’s API is to retrieve your slider’s ID, and add it to the end of the letters “revapi”.
So if your slider’s ID is “12”, when referencing the API’s methods or events, you’d use “revapi12.doSomething()”.
In the above example, “revapi12” would be the API variable used to call an API method. Now that you’ve got the correct API variable to use, you can now use the slider’s API.
For this example, we’re going to hook into the API, and hide the left navigation button when the first slide is loaded, and then hide the right navigation arrow when the last slide loads.
Whenever writing any custom jQuery, it’s always best to use “jQuery” as opposed to the “$” keyword in a WordPress environment. This helps prevent collisions with other JavaScript libraries other than jQuery that also use the “$” keyword.
To get started, let’s write some variables that we’ll use later on inside the API methods.
1 2 3 4 5 6 7 8 9 10 |
// to be assigned for the left navigation arrow var left; // to be assigned for the right navigation arrow var right; // to be assigned for the total number of slides var totalSlides; |
Before we can actually grab any of the elements used in the slider, we need to make sure the slider has fully loaded. To do this, we’ll use the “revolution.slide.onloaded” API method. And once this event fires, we can then assign the above variables to our left/right arrows and also read in the total number of slides.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
var left; var right; var totalSlides; // function to fire once the slider has fully loaded revapi12.on('revolution.slide.onloaded', function() { // read in the total number of slides totalSlides = revapi12.revmaxslide(); // grab the left arrow left = jQuery('.tp-leftarrow'); // grab the right arrow right = jQuery('.tp-rightarrow'); }); |
Next, let’s use the “revolution.slide.onchange” API method to check for what slide is being viewed. We’ll then hide the navigation arrows based on this:
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 |
var left; var right; var totalSlides; revapi12.bind('revolution.slide.onloaded', function() { totalSlides = revapi12.revmaxslide(); left = jQuery('.tp-leftarrow'); right = jQuery('.tp-rightarrow'); }); // function that will fire every time a slide loads revapi12.bind('revolution.slide.onchange', function(event, data) { // the index of the current slide var currentSlide = data.slideIndex; // if it's the first slide, let's hide the left arrow if(currentSlide === 1) { left.css('visibility', 'hidden'); // show the right arrow in case it was previously hidden right.css('visibility', 'visible'); } // if it's the last slide, we'll hide the right arrow else if(currentSlide === totalSlides) { right.css('visibility', 'hidden'); // show the left arrow in case it was previously hidden left.css('visibility', 'visible'); } // "currentSlide" doesn't equal the first or last slide, // so we'll make sure the arrows are visible in case they were previously hidden else { left.css('visibility', 'visible'); right.css('visibility', 'visible'); } }); |
And that’s it! We’ve successfully written some custom JavaScript that hooks into the slider’s API and toggles the navigation arrows’ visibility based on the current slide displayed.
The last step is to add the custom script to your slider’s “Custom JavaScript” section:
https://www.themepunch.com/faq/custom-css-or-javascript-for-version-5-0/
API Tutorial Review
- Find your slider’s API index number.
- Listen for the slider to be initially loaded, using the “revolution.slide.onloaded” method.
- Listen for a slide change, using the “revolution.slide.onchange” API method.
- Add the API script to the slider’s “Custom JavaScript” section.