Jssor Slider: Responsive Code

Question

I am using the Jssor Slider (http://www.jssor.com/demos/slider-cluster.html). As the slides I have are huge (about 2000px in width), they will scale significantly on smaller devices (even iPad). I don't mind having the sides (left and right) to be cropped off symmetrically on smaller devices.

However, what happens is that the slider is fixed on the left at 0px. 1) Is there anyway I can centralize the whole slide container? 2) And scale the slide container based on height of window/browser?

I did reference this but doesn't inspire any solution: Jssor slider 100% width

Anyone can help please? Thank you.

Answer 1

responsive code to fit height or width

//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizes
function ScaleSlider() {
    var windowWidth = $(window).width();

    if (windowWidth) {
        var windowHeight = $(window).height();
        var originalWidth = jssor_slider1.$OriginalWidth();
        var originalHeight = jssor_slider1.$OriginalHeight();

        var scaleWidth = windowWidth;
        if (originalWidth / windowWidth > originalHeight / windowHeight) {
            scaleWidth = Math.ceil(windowHeight / originalHeight * originalWidth);
        }

        jssor_slider1.$ScaleWidth(scaleWidth);
    }
    else
        window.setTimeout(ScaleSlider, 30);
}

ScaleSlider();

$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end