Looking for mind-blowing effects? 🤯 Explore Slider Revolution's advanced WebGL animations

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

Popular Solutions

[ess_grid alias="wp-popular-solutions"]
Impressum | Datenschutz