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:
- Apply fixed size to images, so their dimensions are known before they're loaded. You may use padding-bottom hack to keep everything responsive.
- Use autoScaleSlider option instead of autoHeight. This is recommended when all your images have the same aspect ratio.
- 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?