Skip to main content

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="">
<img src="image.jpg" class="rsImg"/>

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="">link desc</a>

Make sure that you have rsLink class in royalslider.css, or add it manually:

.rsLink {
z-index: 20;
background: transparent;
-webkit-backface-visibility: hidden;

Additional notes:

1. Class `rsContent` is not always required, it simply stretches element to full width and height of slide. 2. The slider will automatically block `a` element during drag/swipe. 3. Sometimes it's better to use call-to-action button inside of a slide instead of linking the whole image. 4. You'll probably want to disable `navigateByClick` slider option, which makes slideshow switch slide on click.