How to create whole slide with hyperlink?

Due to HTML specification you can not nest a tags, so markup of slide with link is different for normal and lazy-loaded image.

If you don't have any <a> tags in slide

Simply wrap slide HTML with a tag

<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)

You need to create an empty overlay over slider. Here is markup of slide with link:

<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. If you don't - so you downloaded RoyalSlider from CodeCanyon long time ago and you should add it manually (or download latest from CC):

.rsLink {
    left:0;
    top:0;
    position:absolute;
    width:100%;
    height:100%;
    display:block;  
    z-index: 20;
    background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
    -webkit-backface-visibility: hidden;
}

That weird string in background property is 1x1px transparent gif to fix IE bug.

Additional notes:

  1. Class rsContent is not always required, it simply stretches element to full width and height of slide.
  2. Slider will automatically block a tag during drag/swipe.
  3. Sometimes it's better just to use call-to-action button inside of slide instead of linking whole image.
  4. You'll probably need to disable navigateByClick slider option