Quick Tip
Many of the methods listed below are also available as Actions
To get started with the API, first assign a variable to the slider's main "init"call.
Note: The slider ID #rev_slider_1 is taken from the Slider Revolution wrapper container that you've added in #6 of the article here https://www.themepunch.com/revsliderjquery-doc/anatomy-basic-slider/
/* initialize the slider based on the Slider's ID attribute */
var revapi = jQuery('#rev_slider_1').show().revolution({
Then the new API variable can be used to call methods and events for the Slider, as shown in the following example.
<script type="text/javascript">
var revapi = jQuery(document).ready(function() {
jQuery('#rev_slider_1').show().revolution({
/* SLIDER SETTINGS HERE */
});
});
revapi.one('revolution.slide.onloaded', function() {
// console.log('slider loaded');
});
</script>
API Events
Listen for when the Slider has officially loaded
revapi.one('revolution.slide.onloaded', function() {
// console.log('slider loaded');
});
Listen for when Slides are changed
revapi.on('revolution.slide.onchange', function(event, data) {
// data.slideIndex = Current Slide Index (starting with the number zero)
// data.currentslide = Current Slide as jQuery Object
// data.prevslide = Previous Slide as jQuery Object
});
Listen for the moment BEFORE Slides are about to change
revapi.on('revolution.slide.onbeforeswap', function (event, data) {
// data.currentslide = Current Slide as jQuery Object
// data.nextslide = Incoming Slide as jQuery Object
});
Listen for the moment AFTER Slides have finished changing
revapi.on('revolution.slide.onafterswap', function (event, data) {
// data.currentslide = Current Slide as jQuery Object
// data.previousslide = Previous Slide as jQuery Object
});
Listen for when Layers are animated into and out of view
revapi.on('revolution.slide.layeraction', function(event, data) {
/*
enterstage: The moment the Layer begins to animate into view
enteredstage: The moment the Layer's initial animation has completed
leavestage: The moment the Layer begins to animate out of view
leftstage: The moment the Layer has finished animating out of view
*/
// data.eventtype = Animation state: 'enterstage', 'enteredstage', 'leavestage', 'leftstage'
// data.layertype = Layer Type (image, video, html)
// data.layersettings = Default Settings for Layer
// data.layer = Layer as jQuery Object
});
Listen for when a video begins to play
revapi.on('revolution.slide.onvideoplay', function(event, data) {
// data.video = The Video API to Manage Video functions
// data.videotype = youtube, vimeo, html5
// data.settings = Video Settings
switch(data.videotype) {
case 'youtube':
// data.video = YouTube iframe API reference:
// https://developers.google.com/youtube/iframe_api_reference#Playback_controls
break;
case 'vimeo':
// data.video = Vimeo iframe API reference
// https://github.com/vimeo/player.js
break;
case 'html5':
// data.video = HTML Video element:
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
break;
}
});
Listen for when a video's playback stops
revapi.on('revolution.slide.onvideostop', function(event, data) {
// data.video = The Video API to Manage Video functions
// data.videotype = youtube, vimeo, html5
// data.settings = Video Settings
switch(data.videotype) {
case 'youtube':
// data.video = YouTube iframe API reference:
// https://developers.google.com/youtube/iframe_api_reference#Playback_controls
break;
case 'vimeo':
// data.video = Vimeo iframe API reference
// https://github.com/vimeo/player.js
break;
case 'html5':
// data.video = HTML Video element:
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
break;
}
});
Listen for when Slider progress has been paused
revapi.on('revolution.slide.onpause', function() {
// Slider progress has been paused
});
Listen for when Slider progress resumes
revapi.on('revolution.slide.onresume', function() {
// Slider progress has resumed
});
Listen for when the Slider has reached the last slide
revapi.on('revolution.slide.slideatend', function() {
// Slider has reached the last slide
});
Listen for when the Slider has reached the "Stop At" Slide
<script type="text/javascript">
var revapi = jQuery(document).ready(function() {
jQuery('#rev_slider_1').show().revolution({
stopLoop: 'on',
stopAfterLoops: 0,
stopAtSlide: 3,
/* SLIDER SETTINGS CONTINUED */
});
});
// listen for when the "stopAtSlide" Slide set above is reached
revapi.on('revolution.slide.onstop', function() {
// Slider has reached the "stopAtSlide" (Slide #3)
});
</script>
API Methods
Load the Slider on-demand
<script type="text/javascript">
var revapi = jQuery(document).ready(function() {
jQuery('#rev_slider_1').show().revolution({
waitForInit: true,
/* SLIDER SETTINGS CONTINUED */
});
});
// only start the slider once the entire window has loaded
jQuery(window).one('load', function() {
revapi.revstart();
});
</script>
Pause Slider progress
revapi.revpause();
Resume Slider progress
revapi.revresume();
Navigate to the previous Slide
revapi.revprev();
Navigate to the next Slide
revapi.revnext();
Navigate to a particular Slide
// Slide index number starting with 0
revapi.revshowslide(2);
Force the Slider to resize itself
revapi.revredraw();
GET the current Slide index
var currentSlide = revapi.revcurrentslide();
GET the total number of slides
var totalSlides = revapi.revmaxslide();
Scroll below the Slider
// scroll below the slider, plus an additional 50 pixels
revapi.revscroll(50);
Show a Slide with a particular ID attribute
revapi.revcallslidewithid('slide-list-item-id-attribute');
Remove a Slide dynamically from the Slider
revapi.revremoveslide(3);
Destroy the Slider instance
revapi.revkill();