4

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.

Community
  • 1
  • 1
Soong
  • 147
  • 2
  • 11

3 Answers3

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
jssor
  • 6,995
  • 2
  • 18
  • 21
2

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.

jssor
  • 6,995
  • 2
  • 18
  • 21
  • Thank you for your prompt reply. I used the codes to auto center anything (re 1) but the slides no longer scale with the window despite the initial responsive code's still in place: http://stackoverflow.com/questions/21529620/jssor-slider-100-width/21540802#21540802 – Soong Apr 27 '14 at 05:41
  • Thank you for all your help. I managed to make the auto center code (re 1) work on [Cluster Slider] (http://www.jssor.com/demos/slider-cluster.html). However, when I tried to do the same on the [Grid Slider] (http://www.jssor.com/demos/grid-slider.html), the sliders disappeared. Any idea how to overcome that? Thanks. – Soong Apr 27 '14 at 19:09
  • 2
    please add 'margin: 0 auto;' to slider container. Please see updated answer. – jssor Apr 27 '14 at 22:47
0

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

TomJones999
  • 775
  • 2
  • 13
  • 30