Unleash your design dreams ✨ Learn about the new editor

Latest version: *.*.*

Buy now

Help center

/

Documentation

/

Custom Code Porting & API Reference

Custom Code Porting & API Reference

Outline of current coding usage, and deprecations, when writing custom PHP, CSS & JS for the SR7 Velocity engine.

Velocity Rendering Engine Philosophy

Our SR7 Velocity rendering engine completely shifted the paradigm underlying Slider Revolution from that of our original Genesis rendering engine.

As at version 6.7 we transitioned to an entirely re-imagined system of lightweight, data-driven, demand-catered methodology. Data processing was simplified and streamlined, in terms of back and front end processing, as well as in how data is exposed to you for leveraging in custom code.

If you have legacy modules built on the Genesis engine, (i.e. made prior to version 6.7), upgrading them to the Velocity 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 upgrading modules is intended to be handled automatically, there are some deprecations to legacy custom coding methods that may require your manual intervention.

This document outlines the key changes to how custom coding for Slider Revolution is now done, and how automatic module upgrading works. It also lists all deprecated or removed JavaScript & PHP and what to use instead, describes changes to CSS classes & IDs, and provides updated names of custom HTML elements/tags.

Deprecated Code

Deprecations to JavaScript, PHP, CSS & HTML are described below.

JavaScript

jQuery was retired and replaced with our own dedicated JavaScript API.

Fallbacks were put in place to minimize breaking change prior to upgrading. 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 current 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 now instead use native JS listeners.

Methods and Events

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

PHP Filters

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

CSS & HTML

New CSS class names, HTML elements, and data structures were introduced.

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

Deprecation Notices

Notices letting you know if a deprecated item is used are available in the console and the Slider Revolution plugin dashboard.

How Module Upgrading Works

Transitioning a module from Genesis to Velocity rendering engine happens 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 Genesis and Velocity 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 Velocity rendering engine.

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

An option is available to force use of the legacy renderer if it is required, though we recommend upgrading to the current rendering engine asap.

JavaScript Changes

Below, you will find a reference to JS methods and events as used in the deprecated SR6 Genesis API, and the current 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 are 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 has replaced 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 SR7 Velocity Engine code that should be used in their place.

PHP Globals

Global variables that were previously defined as global $<var> were 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 were deprecated as at version 6.7, and were 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
In this article

back to overview