Upgrade to 6.7 Now! 🚀 Get Enhanced Performance with the "Velocity" Engine
 
Contact Us
Latest Version:

Slider Revolution

More than just a WordPress slider

Manual

The fundamentals of using Slider Revolution.

Custom Code Porting & API Reference

Guide to custom PHP, CSS & JS deprecation, and transitioning to the new engine

Table of Contents

New Rendering Engine Philosophy

Our new rendering engine introduces an all-new paradigm into Slider Revolution.

We are transitioning into an utterly re-imagined system of lightweight, data-driven, demand-catered methodology. Data processing is being simplified and streamlined, both in terms of back- and front-end processing and in how it is exposed to you for leveraging in custom code.

The transition to the new rendering engine will be handled automatically in the background. This means that from your perspective while using the software, you should notice nothing but quicker, smoother, and all-around more excellent rendering.

That said, as much as we intend to handle the transition for you, some deprecations to legacy custom coding methods may help you become familiar with them.

We’d also like to explain how the transition will work behind the scenes and provide our roadmap for moving from legacy to new rendering engines across upcoming releases.

Deprecated Code

Deprecated Code Types

JavaScript

jQuery is being retired and replaced with our new dedicated JavaScript API.

Fallbacks have been put in place to minimize breaking change. However, we recommend transitioning to the new API as soon as possible.

Where possible, Slider Revolution will attempt to convert legacy custom jQuery code into JavaScript, which is suitable for the new rendering engine.

Where custom code is too complex for complete conversion, it will stay as it is. However, class names, selectors, and so on will be automatically parsed and replaced as far as possible.

Listeners

Where previously we used jQuery’s bind() method, we will now instead use native JS listeners.

Methods and Events

Several methods and events have been replaced or removed, as well as new items introduced into the API.

PHP Filters

PHP global variables have been modified, a selection of PHP filters have been removed, and several PHP functions have been renamed/replaced.

CSS & HTML

All new CSS class names, HTML elements, and data structures are being introduced.

Where possible, code written into the Custom CSS window will be parsed, and legacy class or element names will be replaced with new ones.

Deprecation Notices

Notices letting you know if a deprecated item is used will be available in the console and the Slider Revolution admin area.

How the Transition will Work

The transition to the new rendering engine will happen automatically behind the scenes and should typically not require any manual intervention.

When a module is saved, it stores data in the forms used by both the legacy and new rendering engines.

When a module is loaded on the front end, Slider Revolution will first attempt to load data in the format used by the new rendering engine.

If data is unavailable in the new format, it will be fetched in the legacy format and upgraded on demand.

An option will also be made available to force use of the legacy renderer if it is required.

JavaScript Changes

Below, you will find a reference to JS methods and events as used in the deprecated SR6 Genesis API, and the new SR7 Velocity API methods and events that should be used in their place.

JavaScript Methods

SR6 Genesis EngineSR7 Velocity Engine
revapi.revstart();revapi.start();

(if Api Wait set to on)
revapi.revpause();revapi.pause();
revapi.revresume();revapi.resume();
revapi.revprev();revapi.prevSlide();
revapi.revnext();revapi.nextSlide();
revapi.revscroll(offset);revapi.scroll(offset);
revapi.revremoveslide(slideindex);revapi.removeSlide(slidekey);
revapi.revshowslide(2);revapi.showSlide(2);

Possible arguments:
"last" – Last Slide
"first" – First Slide
"random" – Random Slide
"id" – Slide with ID
"+2" – 2 Slide further
"-1" – 1 Slide back
0–100 – Slide with Index (0 – xx)
revapi.revcallslidewithid('rs-1007');Use revapi.showSlide() instead
revapi.revmaxslide();revapi.maxSlide();

Amount of Slides (Not only through navigation available slides)
revapi.revcurrentslide();revapi.currentSlide();

Returns data:
{index: 2, key: '281', order: 3}
revapi.revlastslide();revapi.lastSlide();

The last available Slide due Navigation
revapi.revredraw();revapi.redraw();
revapi.revkill();revapi.kill();
revapi.revGoToFrame({layerid:'',frame:'',children:true})revapi.playScene('layer','scene');

Example:
revapi.playScene('SR7_1051_1-281-0','scene_1');

JavaScript Events

Events were previously provided via jQuery code using the bind() function. These events will now be provided for use via native JavaScript listeners.

For example, rather than using:

revapi.bind("<eventname>",function (e,data) {
  //custom code
});

You would now use:

document.addEventListener("<eventname>", function (e,data) {
  //custom code
}); 

Below, you will find a rundown of each legacy jQuery event and the new JavaScript that will replace it.

SR6 Genesis EngineSR7 Velocity Engine
revolution.slide.onloaded

Legacy Usage

revapi.bind("revolution.slide.onloaded",function (e) {});		sr.module.ready

Updated Usage

Listener: 
document.addEventlistener("sr.module.ready", function(e) { … });

Returns data in Event: 
id: Module Id
revolution.slide.onchange

Legacy Usage

revapi.bind("revolution.slide.onchange",function (e,data){
  //data.slideIndex => Index of Current Slide
  //data.slideLIIndex => Current Index
  //data.currentslide => Current Slide as jQuery Object
  //data.prevslide => Prev. Slide as jQuery Object
});		sr.slide.afterChange

Updated Usage

Listener:
document.addEventlistener("sr.slide.afterChange", function(e) { … });

Returns data in Event: 
id:  Module Id
current: { index , key, order }
previous: { index, key, order }
revolution.slide.onpause

Legacy Usage

revapi.bind("revolution.slide.onpause",function (e,data) {
  //Timer Paused
});		sr.slide.pause

Updated Usage

Listener:
document.addEventlistener("sr.slide.pause", function(e) { … });

Returns data in Event: 
id:  Module Id
revolution.slide.onresume

Legacy Usage

revapi.bind("revolution.slide.onresume",function (e,data) {
  //Timer Resumed
});		sr.slide.resume

Updated Usage

Listener:
document.addEventlistener("sr.slide.resume", function(e) {…});

Returns data in Event: 
id:  Module Id
revolution.slide.onvideoplay

Legacy Usage

revapi.bind("revolution.slide.onvideoplay",function (e,data) {
  //Video is playing
  //data.video => Video API
  //data.videotype => youtube, vimeo, html5
  //data.settings => Video Settings
});

___

revolution.slide.onvideostop

Legacy Usage

revapi.bind("revolution.slide.onvideostop",function (e,data) {
  //Video is stopped
  //data.video => Video API
  //data.videotype => youtube, vimeo, html5
  //data.settings => Video Settings
});		sr.media.update

Updated Usage

Listener:
document.addEventlistener("sr.media.update", function(e) { … });

Returns data in Event: 
id: Module Id 
player: Media Player Api
type: Media Type (html5, youtube, vimeo)
options: Media Settings
layer: Layer wrapping this Media
state: playing/paused/finished
skey: Slide Key 
revolution.slide.onstop

Legacy Usage

revapi.bind("revolution.slide.onstop",function (e,data) {
  //Slider Stopped
});		sr.module.finished

Updated Usage

Listener:
document.addEventlistener("sr.module.finished", function(e) { … });

Returns data in Event: 
id: Module Id 
revolution.slide.onbeforeswap

Legacy Usage

revapi.bind("revolution.slide.onbeforeswap",function (e,data) {
  //Slider Before Swap
  //data.currentslide => Current Slide as jQuery Object
  //data.nextslide => Coming Slide as jQuery Object
});		sr.slide.beforeChange

Updated Usage

Listener:
document.addEventlistener("sr.slide.beforeChange", function(e) { … });

Returns data in Event: 
id:  Module Id
current: { index , key, order }
next: { index, key, order }
revolution.slide.onafterswap

Legacy Usage

revapi.bind("revolution.slide.onafterswap",function (e,data) {
  //Slider After Swap
  //data.currentslide => Current Slide as jQuery Object
  //data.prevslide => Previous Slide as jQuery Object
});		sr.slide.afterChange

Updated Usage

Listener:
document.addEventlistener("sr.slide.afterChange", function(e) { … });

Returns data in Event: 
id:  Module Id
current: { index , key, order }
previous: { index, key, order }
revolution.slide.slideatend

Legacy Usage

revapi.bind("revolution.slide.slideatend",function (e) {
  //Last Slide Started, Slider is at the end
});		sr.slide.ended

Updated Usage

Listener:
document.addEventlistener("sr.slide.ended", function(e) { … });

Returns data in Event: 
id:  Module Id
current: { index , key, order }
revolution.slide.layeraction

Legacy Usage

revapi.bind("revolution.slide.layeraction",function (e,data) {
  //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
});		sr.layer.action

Updated Usage

Listener:
document.addEventlistener("sr.layer.action",function(e,data){ … });

Returns data in Event: 
id: Module Id
eventtype: Type of Layer action
enterstage,
enteredstage,
leavestage,
leftstage,
framestarted,
frameended
scene: Layer Current called Scene
in,
out,
scene_1 etc.
frame: Frame currently processing
Layerid: Layer ID / Key
caller: Triggering Process (i.e. “action”)
layertype: Type of Layer
container,
text,
image,
shape, etc.
layersettings: All Predefined Settings
RS_MODALOPENED

Legacy Usage

jQuery.fn.revolution.document.on('RS_MODALOPENED', function() {
…
});		sr.modal.loaded
sr.modal.open
sr.modal.close

Updated Usage

Listener:
document.addEventlistener("sr.modal.loaded",function(e,data){ … });
document.addEventlistener("sr.modal.open",function(e,data){ … });
document.addEventlistener("sr.modal.close",function(e,data){ … });

Returns data in Event:
id: Module Id
alias: Module Alias

PHP Changes

Below, you will find a reference to PHP globals, filters and functions as used in the deprecated SR6 Genesis Engine, and the new SR7 Velocity Engine code that should be used in their place.

PHP Globals

Global variables that were previously defined as global $<var> have now been moved into $SR_GLOBALS:

SR6 Genesis EngineSR7 Velocity Engine
$rs_material_icons_css$SR_GLOBALS['icon_sets']['Materialicons']['css']
$rs_material_icons_css_parsed$SR_GLOBALS['icon_sets']['Materialicons']['parsed']
$fa_icon_var$SR_GLOBALS['icon_sets']['FontAwesome']
$fa_var$SR_GLOBALS['icon_sets']['FontAwesome']
$pe_7s_var$SR_GLOBALS['icon_sets']['PeIcon']
$rs_css_collection$SR_GLOBALS['collections']['css']
$rs_ids_collection$SR_GLOBALS['collections']['ids']
$rs_js_collection$SR_GLOBALS['collections']['js']
$revslider_fonts$SR_GLOBALS['fonts']
$revslider_is_preview_mode$SR_GLOBALS['preview_mode']
$revslider_save_post$SR_GLOBALS['save_post']
$revslider_addon_notice_merged$SR_GLOBALS['addon_notice_merged']
$revslider_animations$SR_GLOBALS['animations']
$rs_loaded_by_editor$SR_GLOBALS['loaded_by_editor']
$rs_preview_mode$SR_GLOBALS['preview_mode']
$rs_do_init_action$SR_GLOBALS['data_init']
$rs_slider_serial$SR_GLOBALS['serial']
$rs_revicons$SR_GLOBALS['icon_sets']['RevIcon']
$rs_double_jquery_script$SR_GLOBALS['js_init']

PHP Filters Removed

  • revslider_set_template_slides
  • revslider_set_template_sliders
  • revslider_slide_initByTwitter_pre
  • revslider_slide_initByTwitter_post

PHP Functions

SR6 Genesis Engine PHP functions are deprecated as at version 6.7, and will be removed in version 7.0.

Removed
  • RevSliderSlider->getAllSliderAliases() ==> Deprecated
SR6 Genesis EngineSR7 Velocity Engine
RevSliderAdmin->activate_plugin()RevSliderLicense->active_plugin()
RevSliderAdmin->deactivate_plugin()RevSliderLicense->deactivate_plugin()
RevSliderFunctions->getVal()RevSliderFunctions->get_val()
RevSliderFunctions->cleanStdClassToArray()RevSliderFunctions->class_to_array_single()
RevSliderOutput->isPutIn()RevSlider7Output->check_add_to()
RevSliderSlide->getID()RevSliderSlide->get_id()
RevSliderSlide->getSliderID()RevSliderSlide->get_slider_id()
RevSliderSlide->getImageUrl()$this->image_url
RevSliderSlide->setLayersRaw()RevSliderSlide->set_layers_raw()
RevSliderSlide->saveLayers()RevSliderSlide->save_layers()
RevSliderSlide->getParam()RevSliderSlide->get_val($this->params)
RevSliderSlider->getParam()RevSliderSlider->get_param()
RevSliderSlider->getParams()RevSliderSlider->get_params()
RevSliderSlider->getID()RevSliderSlider->get_id()
RevSliderSlider->getArrSliders()RevSliderSlider->get_sliders()
RevSliderSlider->initByMixed()RevSliderSlider->init_by_mixed()
RevSliderSlider->initByID()RevSliderSlider->init_by_id()
RevSliderSlider->initByAlias()methods and eventsRevSliderSlider->init_by_alias()
RevSliderSlider->getAlias()RevSliderSlider->get_alias()
RevSliderSlider->isAliasExistsInDB()RevSliderSlider->check_alias()
RevSliderSlider->getShortcode()RevSliderSlider->get_shortcode()
RevSliderSlider->getFirstSlideIdFromGallery()RevSliderSlider->get_first_slide_id_from_gallery()
RevSliderSlider->isSlidesFromPosts()RevSliderSlider->is_posts()
RevSliderSlider->isSlidesFromStream()RevSliderSlider->is_stream()
RevSliderSlider->getNumSlidesRaw()RevSliderSlider->get_slides()
RevSliderSlider->getNumSlides()RevSliderSlider->get_slides()
RevSliderSlider->getNumRealSlides()RevSliderSlider->get_wanted_slides()
RevSliderSlider->getTitle()RevSliderSlider->get_title()
RevSliderSlider->getArrSlidersShort()RevSliderSlider->get_sliders_short()
RevSliderSlider->initByDBData()RevSliderSlider->init_by_data()
RevSliderSlider->isAliasExists()RevSliderSlider->alias_exists()
RevSliderSlider->getArrSlideNames()RevSliderSlider->get_slide_names()
RevSliderSlider->getSlidesFromGallery()RevSliderSlider->get_slides()
RevSliderSlider->importSliderFromPost()RevSliderSlider->import_slider()
RevSliderSlider->deleteSlider()RevSliderSlider->delete_slider()
RevSliderSlider->getAllSliderForAdminMenu()RevSliderSlider->get_slider_for_admin_menu()
RevSliderSlider->getNumSlidesRaw()RevSliderSlider->get_slides()
RevSliderFront->putAdminBarMenus()RevSliderFront->add_admin_bar()

Output HTML & CSS Selector Changes

ID General Updates

Removed
  • rev_slider_1328_1_forcefullwidth ==> Deprecated
  • rev_slider_1328_1_wrapper ==> Deprecated
Equivalent
SR6 Genesis EngineSR7 Velocity EngineNotes
rev_slider_1328_1SR7_1328_1Module ID, if custom ID not manually set.
slider-1328-slide-3443-layer-2SR7_1328_1-3443-2Layer ID, if custom ID not manually set.
New
SR7 Velocity EngineNotes
SR7_1328_1-135Slide ID, if custom ID not manually set.
SR7_1328_1-pbarProgress Bar ID.
SR7_1328_1-134-5_audio_html5Media IDs (_audio or _video + _type)

Module General Tags

Removed
  • rs-fullwidth-wrap ==> Deprecated
  • rs-module-wrap ==> Deprecated
  • rs-carousel-space ==> Deprecated
Equivalent
SR6 Genesis EngineSR7 Velocity EngineNotes
rs-modulesr7-module
rs-fw-forcersr7-adjuster
rs-static-layersConverted into Slides with classes like (.sr7-staticslide.sr7-staticslide-low and/or .sr7-staticslide.sr7-staticslide-high)
div.tp-shadowcoversr7-module-shadow
rs-slidessr7-content(Slides, Navigation (depending on Module type), Global (Static) Slides)
rs-slidesr7-slide
rs-dottedon Canvas OR sr7-overlay
rs-carousel-wrapsr7-carousel
rs-modalsr7-modals
rs-modal-cRemovedoversr7-modal-underlay
New
SR7 Velocity EngineDescription
sr7-module-bg

Layer Tags

Removed
  • rs-sbg-px ==> Deprecated (Slide BG converted into Layer)
  • rs-sbg-wrap ==> Deprecated (Slide BG converted into Layer)
  • rs-layer-wrap ==> Deprecated
  • rs-group-wrap ==> Deprecated
  • rs-column-wrap ==> Deprecated
  • rs-row-wrap ==> Deprecated
Equivalent
SR6 Genesis EngineSR7 Velocity EngineNotes
rs-sbgsr7-bg(Layer)
rs-layer-wrap.rs-parallax-wrapsr7-px
rs-mask-wrapsr7-mask
rs-groupsr7-grp
rs-layer[data-type="text"]sr7-txt
rs-layer[data-type="button"]sr7-btn
rs-layer[data-type="image"]sr7-img
rs-layer[data-type="shape"]sr7-shp
rs-layer[data-type="video"]div.sr7-layer sr7-media.sr7-media
rs-postersr7-poster
rs-loop-wrapsr7-loop
rs-dottedon Canvas OR sr7-overlay
rs-zonesr7-zone(Converted Into Layer)
rs-rowsr7-row
rs-columnsr7-col
rs-column-bgsr7-col-bg
New
SR7 Velocity EngineNotes
sr7-row-con(only if Mask, Loop, Parallax settings are enabled)
sr7-col-con(only if Mask, Loop, Parallax settings enabled)

Navigation Tags

Removed
  • rs-progress-bar ==> Deprecated (Canvas)
  • rs-progress-circle ==> Deprecated (Canvas)
  • rs-progress-bg ==> Deprecated (Canvas)
  • rs-progress-gap ==> Deprecated (Canvas)
Equivalent
SR6 Genesis EngineSR7 Velocity Engine
rs-arrowsr7-arrow
rs-thumbssr7-thumbs
rs-tabssr7-tabs
rs-bulletssr7-bullets
rs-bulletsr7-bullet
rs-navmasksr7-tt-mask
rs-thumbs-wrapsr7-thumbs-wrap
rs-thumbsr7-thumb
rs-tabs-wrapsr7-tabs-wrap
rs-tabsr7-tab
rs-progresscanvas.sr7-pbar

General Classes

Removed
  • .rs-ov-hidden ==> Deprecated
  • .revslider-initialised ==> Deprecated
  • .rev_redraw_on_blurfocus ==> Deprecated
  • .rs-pxl-3 (0-15) ==> Deprecated
  • .rs-modal-fullwidth ==> Deprecated
  • .rs-toggled-content ==> Deprecated
  • .rev_break_columns ==> Deprecated
  • .rs-forceuntouchable ==> Deprecated
  • .rs-safari ==> Deprecated
  • .rs-fixedscrollon ==> Deprecated
  • .rs-stickyscrollon ==> Deprecated
  • .modalspinner ==> Deprecated
  • .hideallscrollbars ==> Deprecated
  • .rs-ISM ==> Deprecated
  • .rs-tc-active ==> Deprecated
  • .rs-tc-active ==> Deprecated
  • .rs-stl-visible ==> Deprecated
  • .rev-slidebg ==> Deprecated
  • .rs-ii-o ==> Deprecated
  • .rs-pelock ==> Deprecated
  • .dddwrappershadow ==> Deprecated
  • .dddwrapper-layertobggroup ==> Deprecated
  • .rs-pxl-tobggroup ==> Deprecated
  • .tp-parallax-container ==> Deprecated
  • .rs-pxmask ==> Deprecated
  • .rs_fake_cube ==> Deprecated
  • .rs_fake_cube_wall ==> Deprecated
  • .rs-apiready ==> Deprecated
  • .videoisplaying ==> Deprecated
  • .tp-blockmask_in ==> Deprecated
  • .tp-blockmask_out ==> Deprecated
  • .rs-waction ==> Deprecated
  • .rs-wclickaction ==> Deprecated
  • .tp-temporarydisabled ==> Deprecated
  • .tp-scrollbelowslider ==> Deprecated
  • .rs-go-fullscreen ==> Deprecated
  • .rs-nav-element ==> Deprecated
Equivalent
SR6 Genesis EngineSR7 Velocity EngineNotes
.rs-forceoverflow (on rs-fullwidth-wrap).sr7-overflow-force(on rs-module)
.tp-shadowcoverTag sr7-module-shadow(Classes i.e. sr7-shdw-1)
.dddwrappersr7-3dwrap.sr7-3dwrap-bg
.dddwrapper-layersr7-3dwrap.sr7-3dwrap-layers
.rs-forcehidden.sr-force-hidden
.rs-touchhoversr7-touchhover(Tag)
.tp-video-play-buttonsr7-lrg-play(Tag)
.tp-revstopsr7-lrg-pause(Tag)

Layer Classes

Removed
  • .rs-parallax-wrap ==> Deprecated
  • .rs_html5vidbasicstyles ==> Deprecated
  • .rs-layer-static ==> Deprecated (Global Layers)
  • .rs-on-sh ==> Deprecated
  • .rs-on-car ==> Deprecated
  • .rs-layer-video ==> Deprecated
  • .rs-fsv ==> Deprecated
  • .rs-fcr ==> Deprecated
  • .rs-fcrt ==> Deprecated
  • .rs-bcr ==> Deprecated
Equivalent
SR6 Genesis EngineSR7 Velocity EngineNotes
.rs-layer.sr7-layer
.html5vid.sr7-html5-video
.rs_splitted_linessr7_splitted_lines(+_noanim)
.rs_splitted_wordssr7_splitted_words(+_noanim)
.rs_splitted_charssr7_splitted_chars(+_noanim)
.rs-layer-audiosr7-hidden-audio

Nav + Progress Classes

Removed
  • .noSwipe ==> Deprecated
Equivalent
SR6 Genesis EngineSR7 Velocity EngineNotes
.tp-leftarrow.sr7-leftarrow
.tp-rightarrow.sr7-rightarrow
.tparrows.sr7-arrows
.tp-tabs-inner-wrapper.sr7-ntiw
.tp-tabs-mask.sr7-tabs-mask
.tp-tab-content.sr7-tab-content
.tp-tab-image.sr7-tab-img
.tp-tab-title.sr7-tab-title
.tp-thumbs-inner-wrapper.sr7-ntiw
.tp-thumbs-mask.sr7-thumbs-mask
.tp-thumb-content.sr7-thumb-content
.tp-thumb-image.sr7-thumb-img
.tp-thumb-title.sr7-thumb-title
.tp-bullet.sr7-bullet
.selected.selected
.tp-*.sr7-*In nav elements inner

Important Data on Elements

Equivalent
SR6 Genesis EngineSR7 Velocity Engine
rs-module -> data-slideactivesr7-module -> data-current

Other Tags

Removed
  • rs-cbg-mask-wrap ==> Deprecated
  • rs-bgvideo ==> Deprecated
  • rs-bg-elem ==> Deprecated
  • rs-loader ==> Deprecated
  • rs-sbg-effectwrap ==> Deprecated
  • rs-px-mask ==> Deprecated
Equivalent
SR6 Genesis EngineSR7 Velocity Engine
cuslicusli
Custom Code Porting & API Reference

From The Blog

How to Make a Personal Website: Step-by-Step Guide
Design
How to Make a Professional Website By Yourself
Design
The Best Website Design Practices For Pro Designers
Design

Popular Resources

Optimizing Load Speed and Performance
FAQ
Quick Setup – Slider Revolution
FAQ
Create a Basic Responsive Slider
Video Tutorial
Get Productive Fast
Manual

Newsletter

Newsletter Icon

Join over 35.000 others on the Slider Revolution email list to get access to the latest news and exclusive content.