Minimal RoyalSlider Configuration

RoyalSlider is a light weight, no nonsense, obscenely compatible touch-enabled media slider plugin. It isn’t fancy, which I appreciate because I don’t have to fight against heavy-handed styling to get it to fit my designs. Additionally, the support forum is excellent.

When I started working on the design for this site, I discovered that the plugin had been renamed New RoyalSlider, which I think marked the plugin’s departure from TimThumb. The setup in this new version is different than it used to be, and I had to mess with it for a while before it started behaving to my preferences:

  • Landscape images should fill the full width of the slider.
  • Portrait images should fill the full height of the slider.
  • Resizes to fit container width.
  • No borders, no backgrounds.

General options

  • Templates: Leave it at the default, we’ll be editing this.
  • Skin: Light (just in case something weird happens, this is the most minimal)

Size & scaling

  • Width: 100% (this will make it adapt to the width of the container)
  • Height: Leave blank (this will allow the height of the slider to adapt)
  • Auto scale slider: Check
  • Base width/height: If all the images are the same dimension, this is easy, simply input the dimensions of the image. As this is a ratio, you can grab this from the original image or from the resized WordPress images. In cases where the images are of different dimensions, I set the width to the width of my container, and the height to approximately the average height of the images. I try to keep my sliders in landscape mode as sliders in portrait dimensions get unwieldy.
  • Auto height: Uncheck (I believe this option is intended to do a live resize of the slider depending on the height of the image, but I have never gotten it to work correctly)

Image options

  • Image scale mode: Fit into area.
  • Image scale padding: 0

That takes care of the image sizing and now all that’s left to change is the background color. Insert this into your style.css:

Here’s a slider using the default configuration:




And here’s the same slider using my configuration:




If you prefer thumb navigation, make sure you uncheck “Fit thumbs in viewport,” as this causes a small, but annoying image scaling issue. Also, I highly recommend turning off Miscellaneous -> Mouse drag, as it can cause confusing issues with track pads.

RoyalSlider is also available as a jQuery plugin, I have no idea if anything written here applies.

Comments are closed.