Custom CSS and JavaScript with Slider Revolution
Learn how to integrate your own custom code via Slider Revolution's in built tools.
Table of contents
Custom Code Tools
Slider Revolution provides a collection of developer friendly tools to help you add your own custom CSS and JS, to further enhance or manipulate your modules.
This includes an in-built CSS and JS code editor:
A JavaScript API exposing methods and events:
And the ability to integrate custom classes and IDs throughout your modules, at which you can target your own CSS and JS.
Let’s see how all these tools work.
Accessing the Custom Code Editor
Go to Module General Options, then click CSS/jQuery:
A popup window will appear with two tabs, labelled CUSTOM CSS and CUSTOM JS:
The main portion of this window is a code editor, into which you can add your custom CSS or JS code:
Custom CSS
Add any custom CSS you’d like by adding it via the custom code editor’s CSS tab:
Custom CSS is typically best used along with adding a custom class or ID, so you have a clearly defined target for your styles.
Custom classes and IDs can be applied to the entire module, to slides, or to layers.
Custom Module Class or ID
To add a custom class or ID to the entire module, go to the Module General Options tab, and into the Defaults sub-section:
There, in the Default Basics panel, you will see three options that can be used to apply classes and an ID to the entire module; they are Module ID, Module Classes, and Wrapper Classes:
To add a custom ID to your module, enter it into the Module ID field:
You can only add one custom ID in this field.
To add custom classes, enter them into either the Module Classes or Wrapper Classes fields:
The difference between these fields is discussed below.
If you’d like to add multiple classes to either of these fields, use a comma to separate them.
Wrapper vs Module Level
Slider Revolution uses two custom HTML elements as the outermost elements of every module. They are the <rs-module-wrap>
element, and nested inside that is the <rs-module>
element:
The Module ID and Module Classes options will apply to the <rs-module>
element. For example, here you can see an <rs-module>
element with the ID “custom_module_id”, and the class “custom_module_class”:
The Module ID will additionally be used to create the <rs-module-wrap> element’s ID, wherein it will append “_wrapper”. For example, in this <rs-module> element the ID is “custom_module_id_wrapper”:
The Wrapper Classes option will apply to the <rs-module-wrap>
element. For example, in this <rs-module>
element the ID is “custom_module_class”:
Custom Slide Class or ID
To give a slide a custom class or ID, go to its Slide Options tab, then into the Tags & Link sub-section:
In the Slide HTML Tags panel, you can set a class in the Classes field, and an ID in the ID field:
If you wish to add multiple classes, comma separate them.
Custom Layer Class or ID
To give a layer a custom class or ID, select it then go to the Layer Options tab, Attributes sub-section:
In the Attributes panel, you will find options to set classes and IDs on a Layer or Wrapper level.
Layer vs Wrapper Level
Similarly to what we discussed earlier about adding classes and IDs to the <rs-module-wrap>
and <rs-module>
elements for the entire module, each layer also has two custom elements to which you can add custom classes and IDs. In this case the custom elements are <rs-layer-wrap>
and, nested inside that, <rs-layer>
:
To set an ID for the <rs-layer>
element, add it to the Layer ID option:
To set a class for the <rs-layer>
element, add the class name you want to use to the Classes option directly below the Layer ID option:
For example, here is an <rs-layer>
element with the ID “custom_layer_id” and the class “custom_layer_class”:
If you want to add multiple classes, comma separate them.
To instead set an ID for the <rs-layer-wrap>
element, add it to the Wrapper ID option:
And to set a class for the <rs-layer-wrap>
element, add the class name(s) you want to use to the Classes option directly below the Wrapper ID option:
For example, here is an <rs-layer-wrap>
element with the ID “custom_layer_wrapper_id” and the class “custom_layer_wrapper_class”:
JS API
Down the right side of the window you will see a bar labeled API:
Clicking this bar will open the API panel, which contains a list of all the JS methods and events available to enable you to manipulate your module’s functionality:
Each item has a convenient + button to its right side, which will insert the code for that item when pressed:
API Methods & Events
As shown above, the top portion of the API panel contains the available methods.
Scroll down to the bottom portion of the panel for the available events:
Methods are used to make things happen in the module, while events listen for things happening in the module.
For example, with methods, if you click the Pause Slider +
button:
The code required for the revpause()
method to pause a slider is automatically added to the CSS/JS Editor:
And you could use the revresume()
method to start it again:
With events, you could click the Slider Paused +
button to bind the onpause
event for detecting when the slider has been paused:
Doing so automatically adds the required onpause
code to the CSS/JS Editor:
To detect when the slider is playing again, you could click the Slider is Playing after pause +
button to bind the onresume
event:
Custom JS Between Modules
You will notice that every time you click one of the API + buttons and insert a method or event, it is prefaced with a unique API identifier, e.g. revapi815
:
This identifier is specific to the module you are working on. This means you can use this API identifier to target events and methods from another module.
For example, one module could contain a button that pauses another module. This could be done simply by adding a callback action to the button, and having it call the revpause()
method against the API identifier of the target module: