Skip to main content

Dynamically change imageScaleMode option

First of make sure that you call this code after slider is initialized.

// get slider instance
var slider = $('#your-slider-id').data('royalSlider');

// change scale mode
slider.st.imageScaleMode = "fill";

// force updating size by adding "true" to updateSliderSize method
slider.updateSliderSize(true);

You may also change imageAlignCenter option like this.

For example, to dynamically change scale mode from "fill" to "fit" in fullscreen, use such code:

var slider = $('.royalSlider').data('royalSlider');
slider.ev.on('rsEnterFullscreen', function() {
slider.st.imageScaleMode = 'fit';
slider.updateSliderSize(true);
});
slider.ev.on('rsExitFullscreen', function() {
slider.st.imageScaleMode = 'fill';
slider.updateSliderSize(true);
});

(as an alternative, you may force styles via CSS, in fullscreen slider root element gets class rsFullscreen)