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 Purchase 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 $29. One License Key required per Domain.

Slider Revolution 6.0 NOW available!

Linking to Another Web Page

Click here to learn how to link a Slide or Layer to another web page.

Contents:

1. HTML Markup Example

Actions are added to Slide Layers as the “data-actions” attribute, and are written in JavaScript Object format, as shown in the following example:

<!-- LAYER WITH LINK ACTION APPLIED -->
<div class="tp-caption tp-resizeme largewhitebg"
 
     data-actions='[{
 
         "event": "click",
         "action": "simplelink",
         "target": "_self",
         "url": "http://www.themepunch.com"
 
     }]'
 
     data-frames='[{"delay": 0, "speed": 300, "from": "opacity: 0", "to": "opacity: 1"},
                   {"delay": "wait", "speed": 300, "to": "opacity: 0"}]'
 
     data-x="right"
     data-y="center"
     data-hoffset="30"
     data-voffset="-30"
     data-width="['500']"
     data-height="['auto']"
 
>Caption with Action</div><!-- END LAYER -->

2. Change Slides

2.1 Jump to a different Slide

To navigate to a specific slide, first add a “data-index” to the slide you wish to navigate to:

<!-- "data-index" added to the Slide to navigate to -->
<!-- In the following example, "rs" is the default prefix, and "2" represents "slide #2" -->
<li data-transition="fade" data-index="rs-2">
 
    <!-- slide's main background image -->
    <img src="assets/images/notgeneric_bg3.jpg" alt="Sky" class="rev-slidebg">
 
    <!-- layers placed here -->
 
</li>

Then link to the other slide’s “data-index” in the Action’s “slide” setting (shown as “rs-2” in the example below).

event
  • mouseenter
  • mouseleave
  • click
action
  • jumptoslide
slide
    The other slide to jump to (based on its "data-index" attribute)
    delay
      Apply an optional delay (in milliseconds) to the Action

      data-actions='[{
       
          "event": "click",
          "action": "jumptoslide",
          "slide": "rs-2",
          "delay": "0"
       
      }]'

      2.2 Navigate to the Next Slide

      event
      • mouseenter
      • mouseleave
      • click
      action
      • jumptoslide
      slide
      • next
      delay
        Apply an optional delay (in milliseconds) to the Action

        data-actions='[{
         
            "event": "click",
            "action": "jumptoslide",
            "slide": "next",
            "delay": "0"
         
        }]'

        2.3 Navigate to the Previous Slide

        event
        • mouseenter
        • mouseleave
        • click
        action
        • jumptoslide
        slide
        • previous
        delay
          Apply an optional delay (in milliseconds) to the Action

          data-actions='[{
           
              "event": "click",
              "action": "jumptoslide",
              "slide": "previous",
              "delay": "0"
           
          }]'

          3. Pause/Resume Slider Progress

          event
          • mouseenter
          • mouseleave
          • click
          action
          • pauseslider
          • playslider
          • toggleslider
          delay
          Apply an optional delay (in milliseconds) to the Action

          data-actions='[{
           
              "event": "click",
              "action": "pauseslider",
              "delay": "0"
           
          }]'

          Scroll Below Slider

          Quick Tip

          The "scrollbelow" Action scrolls the page to the content directly beneath the Slider. To scroll to a specific part of your web page, use an anchor link along with a traditional hyperlink tag instead.

          event
          • mouseenter
          • mouseleave
          • click
          action
          • scrollbelow
          offset
            Scroll an additional amount of pixels
            delay
              Apply an optional delay (in milliseconds) to the Action

              data-actions='[{
               
                  "event": "click",
                  "action": "scrollbelow",
                  "offset": "50px"
                  "delay": "0"
               
              }]'

              5. Show/Hide Additional Layers

              The Actions below allow for controlling another Layer’s visibility.  To get started, first assign an ID attribute to the Layer you’d like to control.   In the following example, the Layer’s ID is “slide-2-layer-1”.

              <!-- BEGIN TEXT LAYER -->
              <div class="tp-caption tp-resizeme largewhitebg" id="slide-2-layer-1"
               
                   data-frames='[{"delay": 500, "speed": 300, "from": "opacity: 0", "to": "opacity: 1"},
                                 {"delay": "wait", "speed": 300, "to": "opacity: 0"}]'
               
                   data-x="center"
                   data-y="center"
                   data-hoffset="0"
                   data-voffset="0"
                   data-width="['auto']"
                   data-height="['auto']"
               
              >Caption with ID Attribute</div>
              <!-- END TEXT LAYER -->

              Next, add the Action to your button:

              event
              • mouseenter
              • mouseleave
              • click
              action
              • startlayer
              • stoplayer
              • togglelayer
              layer
                The ID of the Layer to control
                delay
                  Apply an optional delay (in milliseconds) to the Action

                  data-actions='[{
                   
                      "event": "click",
                      "action": "startlayer",
                      "layer": "slide-1-layer-2",
                      "delay": "0"
                   
                  }]'

                  And then adjust the animation delay parameters and also add the “data-lasttriggerstate” attribute to the Layer you’d like to control.

                  In the following example, the first “data-frames” Object represents the Layer’s “start” animation, with the second representing its “end” animation.

                  delay
                    "bytrigger" takes the Layer out of the Slide's normal timeline, changing the Layer's start and/or end animations to be controlled by an Action instead.
                    data-lasttriggerstate
                      Use "reset" to always reset the trigger state. And use "keep" to retain the Layer's trigger state the next time the slide is shown.

                      <div id="slide-2-layer-1"
                           class="tp-caption tp-resizeme largewhitebg" 
                       
                           data-frames='[{
                       
                               "delay": "bytrigger",
                               "speed": 300,
                               "from": "opacity: 0",
                               "to": "opacity: 1"
                       
                           }, {
                       
                               "delay": "bytrigger",
                               "speed": 300,
                               "to": "opacity: 0"
                       
                           }]'
                       
                           data-lasttriggerstate="reset"
                       
                           data-x="right"
                           data-y="center"
                           data-hoffset="30"
                           data-voffset="-30"
                           data-width="['500']"
                           data-height="['auto']"
                       
                      >Caption Text</div><!-- END LAYER -->

                      6. Video/Audio

                      To control the current slide’s Background Video, enter “backgroundvideo” for the Action’s “layer” setting.

                      If the current Slide only contains one Video/Audio Layer, enter “firstvideo” for the Action’s “layer” setting.

                      Or enter the Layer div’s ID to control a specific Layer, as shown in the following examples:

                      <!-- VIDEO LAYER TO CONTROL -->
                      <div class="tp-caption tp-resizeme tp-videolayer" id="slide-1-layer-2"

                      <!-- AUDIO LAYER TO CONTROL -->
                      <div class="tp-caption tp-resizeme tp-audiolayer" id="slide-1-layer-2"

                      6.1 Play/Pause Media

                      event
                      • mouseenter
                      • mouseleave
                      • click
                      action
                      • playvideo
                      • pausevideo
                      • togglevideo
                      layer
                        The video/audio to control. Options are "backgroundvideo",  "firstvideo" or the Layer's ID.
                        delay
                          Apply an optional delay (in milliseconds) to the Action

                          data-actions='[{
                           
                              "event": "click",
                              "action": "playvideo",
                              "layer": "slide-1-layer-2",
                              "delay": "0"
                           
                          }]'

                          6.2 Mute/Unmute Media

                          Quick Tip

                          Use the "toggle_global_mute_video" Action to mute all Audio in the slider. Useful for sliders that include multiple Audio Layers such as background music + narration.

                          event
                          • mouseenter
                          • mouseleave
                          • click
                          action
                          • mutevideo
                          • unmutevideo
                          • toggle_mute_video
                          • toggle_global_mute_video
                          layer
                            The video to control. Options are "backgroundvideo""firstvideo" or the Layer's ID.
                            delay
                              Apply an optional delay (in milliseconds) to the Action

                              data-actions='[{
                               
                                  "event": "click",
                                  "action": "mutevideo",
                                  "layer": "slide-1-layer-2",
                                  "delay": "0"
                               
                              }]'

                              7. Fullscreen

                              The Fullscreen Action can be used to dynamically change the slider’s Layout, expanding the slider to fill the browser’s window.

                              event
                              • mouseenter
                              • mouseleave
                              • click
                              action
                              • togglefullscreen
                              • gofullscreen
                              • exitfullscreen
                              delay
                                Apply an optional delay (in milliseconds) to the Action

                                data-actions='[{
                                 
                                    "event": "click",
                                    "action": "togglefullscreen",
                                    "delay": "0"
                                 
                                }]'

                                8. Misc.

                                8.1 Call an external JavaScript function

                                event
                                • mouseenter
                                • mouseleave
                                • click
                                action
                                • callback
                                callback
                                  The external function to call
                                  delay
                                    Apply an optional delay (in milliseconds) to the Action

                                    data-actions='[{
                                     
                                        "event": "click",
                                        "action": "callback",
                                        "callback": "externalFunction()",
                                        "delay": "0"
                                     
                                    }]'

                                    8.2 Simulate Click

                                    If another Layer contains certain Actions, those Actions can be triggered from a separate Layer with the “simulateclick” Action.

                                    event
                                    • mouseenter
                                    • mouseleave
                                    • click
                                    action
                                    • simulateclick
                                    layer
                                      The ID of the Layer to trigger
                                      delay
                                        Apply an optional delay (in milliseconds) to the Action

                                        data-actions='[{
                                         
                                            "event": "click",
                                            "action": "simulateclick",
                                            "layer": "slide-1-layer-2",
                                            "delay": "0"
                                         
                                        }]'

                                        8.3 Toggle any given Layer's class name

                                        event
                                        • mouseenter
                                        • mouseleave
                                        • click
                                        action
                                        • toggleclass
                                        layer
                                          The ID of the Layer to control (could also be the ID from the same Layer)
                                          classname
                                            The class to add/remove
                                            delay
                                              Apply an optional delay (in milliseconds) to the Action

                                              data-actions='[{
                                               
                                                  "event": "click",
                                                  "action": "toggleclass",
                                                  "layer": "slide-1-layer-1", 
                                                  "classname": "some-class-name",
                                                  "delay": "0"
                                               
                                              }]'

                                              9. Example containing multiple Actions

                                              The following Action combination could be applied to a “mute/unmute” button to control an Audio Layer, and then also toggle its own class for styling purposes.

                                              data-actions='[{
                                               
                                                  "event": "click",
                                                  "action": "mutevideo",
                                                  "layer": "slide-1-layer-2",
                                                  "delay": "0"
                                               
                                              }, {
                                               
                                                  "event": "click",
                                                  "action": "toggle_mute_video",
                                                  "layer": "slide-1-layer-1",
                                                  "classname": "mute-state-style",
                                                  "delay": "0"
                                               
                                              }]'

                                              Popular Solutions