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

re 1: here is a trick to auto center anything,

<div style="position: relative; width: 100%; overflow: hidden;">
    <div style="position: relative; left: 50%; width: 5000px; text-align: center; margin-left: -2500px;">
        <!-- use 'margin: 0 auto;' to auto center element in parent container -->
        <div u="slider1_container" style="...margin: 0 auto;..." ...>
        </div>
    </div>
</div>

re 2: you can scale the slider to any size with api call 'jssor_slider1.$ScaleWidth(width)' as jssor slider always keeps aspect ratio, to fit the slider to height of window, you can detect window height, and then calculate width.

Answer 2

General FYI: "margin: auto" is your friend for centering most HTML elements horizontally.

Answer 3

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