Skip to main content

Incorrect height of slide with enabled autoHeight option

If you have images in slide that don't have rsImg class and don't have fixed size, slider won't be able to calculate a height of slide properly, as you can not get the size of an image that isn't loaded.

There are a few fixes:

  1. Apply fixed size to images, so their dimensions are known before they're loaded. You may use padding-bottom hack to keep everything responsive.
  2. Use autoScaleSlider option instead of autoHeight. This is recommended when all your images have the same aspect ratio.
  3. Instead of initializing slider in document ready use window.load (or ImagesLoaded plugin) that will fire only when all images are loaded.
// wait until every image on page is loaded
$(window).load(function() {
// initialize slider
$('.royalSlider').royalSlider({
// options
});
});

or:

$(window).load(function() {
// update size of slider (if you already initialized it before)
$('.royalSlider').royalSlider('updateSliderSize', true);
});

Also, autoHeight doesn't work with properties like autoScaleSlider, imageScaleMode and imageAlignCenter, as it's impossible to center something in "unknown" height. So make sure that they're disabled.

autoHeight: true,
autoScaleSlider:false,
imageScaleMode:'none',
imageAlignCenter: false

Please note that autoHeight option adds additional transition to slide, so think twice before enabling it, do you really have slides of different height?