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 = "fill";

// force updating size by adding "true" to updateSliderSize method

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() { = 'fit';
slider.ev.on('rsExitFullscreen', function() { = 'fill';

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