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.

Globally:

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

$('.royalSlider').royalSlider({
    // other options...
    imgWidth: 650,
    imgHeight: 400
});

Separately:

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>
</div>

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.