Search code examples
jssor

jssor full height or full screen slider / possible?


is it possible to make this demo http://www.jssor.com/demos/full-width-slider.html to full screen height ? like supersizes carousel http://buildinternet.com/project/supersized/slideshow/3.2/demo.html

Thanks


Solution

  • please use following code to scale slider to full screen,

    //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
    

    and wrap the slider container

    <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 id="slider1_container" style="...margin: 0 auto;..." ...>
            </div>
    
        </div>
    </div>
    

    Please visit Full Screen Slider with source code.