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.