API Tutorial

Slider Revolution has several API methods that offer advanced users more control of the slider.

In this post, we’ll walk through using the API in a real-world example. But first, check out the slider’s available methods and events that are available.

 

http://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()”.

slider-id-number

 

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.

 

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.

 

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:

 

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:

http://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.