Slider Revolution 6.3 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