← Slider in Laptop
Simple Vertical Slider →

Gallery with Fade and Vertical Thumbs

Size of thumbnails can be easily changed dynamically via CSS media queries (as is done in this demo).

Image scaling option is set to "Fit if smaller". That means that image will fit inside slider area keeping proportions only if it's larger. There are also "fill the area", "fit", and "none" image scaling options.

Markup for current slider

For better understanding 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-2 {
  width: 100%;
  background: #151515;
  -webkit-user-select: none;
  -moz-user-select: none;  
  user-select: none;
}

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. Feel free to combine files in one.
Make sure that paths match locations of files.

List of Starter Templates