Adding width and height properties to images

Since 9.3 version, you may specify width and height properties for images ti add more natural-looking loading.

Without width & height


With width & height


You may specify width and height globally for every image in slider, or separately for each image.


Add imgWidth and imgHeight options to slider JS initialization code of dimensions of your images. For example:

    // other options...
    imgWidth: 650,
    imgHeight: 400


Add data-rsw (for width) and data-rsh (for height) attributes for rsImg element. These attributes will override global width & height options. For example:

<div class="royalSlider rsDefault">
        <!-- simple image -->
    <img data-rsw="550" data-rsh="400" class="rsImg" src="path-to-image.jpg" alt="image description" />

    <!-- lazy loaded image-->
    <a data-rsw="390" data-rsh="470" class="rsImg" href="path-to-image.jpg">image description</a>

Additional notes

  • It's recommended to disable fadeInLoadedSlide:false option if it's enabled.
  • Via these options you set only base (natural) size of image, actual size how it's displayed in slider can be controlled via image scaling options.
  • Big images for fullscreen are currently not supported by this option.
  • To disable loading indicator add usePreloader:false to slider.

Found a mistake in article? Know how to improve it? Please open support ticket.