Slider in Laptop →

Gallery with Deep Linking

Deep linking module (introduced in v9.1.3) makes URL automatically change when you switch slides and you can easily link to specific slide. You may also leave only ability to link. Hashchange option can be added to any type of slider. You may also set custom prefix ('image-' part).

Scrolling of thumbnails is turned off.

Stunning photography by Gilderic, not included in download.

Markup for current slider

Please don't use this HTML file as a starter file, create your own and follow steps in basic usage section of documentation

Slider JavaScript initialization code.

Additional CSS styles for current slider.

#gallery-t-group {
  width: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;  
  user-select: none;
}
.rsDefaultInv,
.rsDefaultInv .rsOverflow,
.rsDefaultInv .rsSlide,
.rsDefaultInv .rsVideoFrameHolder,
.rsDefaultInv .rsThumbs {
  background: #eee;
}

#gallery-t-group .rsThumb {
  float: left;
  overflow: hidden;
  width: 56px;
  height: 56px;
  margin-right: 1px;
}
#gallery-t-group .rsThumbs {
  width: 285px;
  height: 100%;
  position: absolute;
  top: 0;
  padding: 0 0 0 1px;
  right: 0;
}
#gallery-t-group .rsGCaption {
  right: 285px;
  line-height: 12px;
  padding: 1px 7px;
  font-size: 11px;
  background: #EEE;
  position: absolute;
  width: auto;
  bottom: 0;
  float: none;
  text-align: left;
}
@media screen and (min-width: 0px) and (max-width: 1200px) {  
  #gallery-t-group .rsThumbs {
    width: 228px;
  }
  #gallery-t-group .rsGCaption {
    right: 228px;
  }
}
@media screen and (min-width: 0px) and (max-width: 760px) {  
  #gallery-t-group .rsThumbs {
    left: 0;
    position: relative;
    width: 100%;
    height: auto;
    padding: 1px 0 0 1px;
  }
  #gallery-t-group .rsThumbsContainer {
    height: auto !important;
  }
  #gallery-t-group .rsGCaption { 
    right: 0;
  }

}

HTML markup of slider.

You should include: jQuery, main slider JavaScript file, main slider CSS file, skin CSS file.
It's recommended to get jquery.royalslider.min.js from build tool and jquery.js from its official site. Always use the latest version. Feel free to combine files in one.
Make sure that paths match locations of files.

List of Starter Templates