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!

Add Links to

1. Add a Link to an entire Slide

<!-- "data-link", "data-target" and "data-slideindex" are the attributes for setting up slide links -->
<li data-transition="fade" data-link="http://www.themepunch.com" data-target="_blank" data-slideindex="back">
 
    <!-- main background image -->
    <img src="assets/images/notgeneric_bg5.jpg" alt="Ocean" class="rev-slidebg">
 
</li><!-- END SLIDE -->

1. data-link
    The url to navigate to
    2. data-target
      The link target
      3. data-slide-index
      • front
      • back
      Use "front" if the entire slide should always be clickable, and "back" if the link should not interfere with other Layers.

      2. Layer Links

      The easiest way to add a link to a Layer is to convert the Layer’s markup element from <div> to  <a>, where this:

      <!-- BEGIN LAYER -->
      <div class="tp-caption tp-resizeme largewhitebg"
       
          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 Text</div><!-- END LAYER -->

      .. is changed to this:

      <!-- Layer Element converted to a traditional hyperlink, with a "href" and "target" attribute added -->
      <a href="http://www.themepunch.com" target="_self" class="tp-caption tp-resizeme largewhitebg" 
       
          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 Text</a><!-- END LAYER LINK -->

      Links can also be added to regular <div> Layers via the “data-actions” attribute.

      <!-- 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 Text</div><!-- END LAYER -->

      Popular Solutions