Search code examples
jssor

responsive slider breaks image ratio on $FillMode: 2


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);

Solution

  • 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.