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.