How to create whole slide with hyperlink?
If you don't have any <a> elements in a slide
Wrap slide HTML content with link element:
<a class="rsContent" href="http://example.com">
<img src="image.jpg" class="rsImg"/>
</a>
If you have <a> tags in slide markup (lazy-loaded images)
According to HTML specification, you can not nest a
elements, so markup of a slide with a link should look like this:
<div class="rsContent">
<a class="rsImg" href="image.jpg" alt="image desc">image desc</a>
<a class="rsLink" href="http://example.com">link desc</a>
</div>
Make sure that you have rsLink
class in royalslider.css, or add it manually:
.rsLink {
left:0;
top:0;
position:absolute;
width:100%;
height:100%;
display:block;
z-index: 20;
background: transparent;
-webkit-backface-visibility: hidden;
}
Additional notes:
- Class
rsContent
is not always required, it simply stretches element to full width and height of slide. - The slider will automatically block
a
element during drag/swipe. - Sometimes it's better to use call-to-action button inside of a slide instead of linking the whole image.
- You'll probably want to disable
navigateByClick
slider option, which makes slideshow switch slide on click.