When I use the following code recommended on the jssor site (below) to make the slider reactive it ends up breaking the image ratios if I set this to $FillMode:1 (contain (keep aspect ratio and put all inside slide)). I am guessing there is something that is being calculated in the background after the images are loaded but before the responsive code below is triggered which I could potentially call again to avert this issue by recalculating new ratios for the images but I have no idea where to start with this one, any help or pointers much appreciated!
function ScaleSlider() {
var parentWidth = $('#slider1_container').parent().width();
if (parentWidth) {
jssor_slider1.$ScaleWidth(parentWidth);
}
else
window.setTimeout(ScaleSlider, 30);
}
//Scale slider after document ready
ScaleSlider();
//Scale slider while window load/resize/orientationchange.
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
The $FillMode
and responsive code
work separately in different way.
$FillMode
indicates the way to fill image in each slide.
responsive code
scales the whole slider according to the logic you specified in ScaleSlider
function.