API
Slider Revolution offers a public API which you can use to control the slider, and listen to events triggered by layers, slides, videos, etc. within your own scripts.
To address the Methods and Events easier, save the reference of the Calling Script as shown below:
|
1 2 3 4 5 6 |
var revapi; jQuery(document).ready(function() { revapi = jQuery("#sliderid").revolution({ ... }); }); |
From now on you can call the Public functions via the revapi object. However you still can call functions via a jQuery selector just like jQuery(‘#sliderid’).function()
API Methods / Functions
Pause Slider
jQuery('#sliderid').revpause();
Resume Slider
jQuery('#sliderid').revresume()
Start Slider
jQuery('#sliderid').revstart();
In case the Slide was not started after initialization due the waitForInit option (see Slider Settings) you can call this method to start the Slider on demand!
Previous Slide
jQuery('#sliderid').revprev();
Next Slide
jQuery('#sliderid').revnext();
Go To Slide with ID
jQuery('#sliderid').revcallslidewithid('rs-1007');
This will trigger the Slide with Slide ID rs-1007. Note, you dont need to add extra # selector !
Go To Slide
jQuery('#sliderid').revshowslide(2);
This will trigger the Slide with Slide Index 2.
Get Amount of Slides
jQuery('#sliderid').revmaxslide();
Delivers the amount of the slides.
Get Current Slide Index
jQuery('#sliderid').revcurrentslide();
Delivers the Index of the current Slide.
Get Last Slide Index
jQuery('#sliderid').revlastslide();
Delivers the Index of the last slide.
Scroll Below Slider
jQuery('#sliderid').revscroll(offset);
Scroll below the Slider with the Offset defined via the parameter. (Can be px or % value)
Redraw Slider
jQuery('#sliderid').revredraw();
Go through all Layers, Slide, Sizes, Navigation and redraw them in the DOM. Helps to fix issues if Slider becomes Visible / Hidden after some other functions, DOM Manipulation. (used for Resize Window also)
Remove (kill) Slider
jQuery('#sliderid').revkill();
Removes the Slider with its Markups, Listeners, Timelines, callbacks etc.
API Events
Slider Loaded
jQuery('#slideid').bind("revolution.slide.onloaded",function (e) {
console.log("slider loaded");
});
console.log("slider loaded");
});
Slider swapped to an other slide
jQuery('#slideid').bind("revolution.slide.onchange",function (e,data) {
console.log("slide changed to: "+data.slideIndex);
console.log("current slide <li> Index: "+data.slideLIIndex);
//data.currentslide - Current Slide as jQuery Object
//data.prevslide - Previous Slide as jQuery Object
});
console.log("slide changed to: "+data.slideIndex);
console.log("current slide <li> Index: "+data.slideLIIndex);
//data.currentslide - Current Slide as jQuery Object
//data.prevslide - Previous Slide as jQuery Object
});
Slider paused
revapi16.bind("revolution.slide.onpause",function (e,data) {
console.log("timer paused");
});
console.log("timer paused");
});
Slider is Playing after pause
jQuery('#slideid').bind("revolution.slide.onresume",function (e,data) {
console.log("timer resume");
});
console.log("timer resume");
});
Video is playing in slider
jQuery('#slideid').bind("revolution.slide.onvideoplay",function (e,data) {
console.log("video play");
//data.video - The Video API to Manage Video functions
//data.videotype - youtube, vimeo, html5
//data.settings - Video Settings
});
console.log("video play");
//data.video - The Video API to Manage Video functions
//data.videotype - youtube, vimeo, html5
//data.settings - Video Settings
});
Video is stopped in slider
jQuery('#slideid').bind("revolution.slide.onvideostop",function (e,data) {
console.log("video stop");
//data.video - The Video API to Manage Video functions
//data.videotype - youtube, vimeo, html5
//data.settings - Video Settings
});
console.log("video stop");
//data.video - The Video API to Manage Video functions
//data.videotype - youtube, vimeo, html5
//data.settings - Video Settings
});
Slider reached the 'stop at' slide
jQuery('#slideid').bind("revolution.slide.onstop",function (e,data) {
console.log("slider stopped");
});
console.log("slider stopped");
});
Prepared for slide change
jQuery('#slideid').bind("revolution.slide.onbeforeswap",function (e) {
console.log("Slider Before Swap");
//data.currentslide - Current Slide as jQuery Object
//data.nextslide - Coming Slide as jQuery Object
});
console.log("Slider Before Swap");
//data.currentslide - Current Slide as jQuery Object
//data.nextslide - Coming Slide as jQuery Object
});
Finnished with slide change
jQuery('#slideid').bind("revolution.slide.onafterswap",function (e) {
console.log("Slider After Swap");
//data.currentslide - Current Slide as jQuery Object
//data.previousslide - Previous Slide as jQuery Object
});
console.log("Slider After Swap");
//data.currentslide - Current Slide as jQuery Object
//data.previousslide - Previous Slide as jQuery Object
});
Last slide starts
jQuery('#slideid').bind("revolution.slide.slideatend",function (e) {
console.log("slide at end");
});
console.log("slide at end");
});
Layer Events
jQuery('#slideid').bind("revolution.slide.layeraction",function (e) {
//data.eventtype - Layer Action (enterstage, enteredstage, leavestage,leftstage)
//data.layertype - Layer Type (image,video,html)
//data.layersettings - Default Settings for Layer
//data.layer - Layer as jQuery Object
});
//data.eventtype - Layer Action (enterstage, enteredstage, leavestage,leftstage)
//data.layertype - Layer Type (image,video,html)
//data.layersettings - Default Settings for Layer
//data.layer - Layer as jQuery Object
});