The Worlds Most Powerful
WordPress Builder

If you Purchased & Registered a Slider Revolution License you can comfortably upgrade version 5.x to 6.0 from your WordPress Dashboard.

Why Activate Slider Revolution?

Activating Slider Revolution with your Personal Purchas Code will unlock all available Features.

Easy Live Updates
Personal License Key
200+ Template Library
1000+ Object Library
25+ Amazing Add-Ons
1on1 Ticket Support

*Regular License from $26. One License Key required per Domain.

Slider Revolution 6.0 NOW available!

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.

/* 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();

Popular Solutions