jssor full height or full screen slider / possible?

Question

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

jssor · Accepted Answer · 2015-03-04T11:20:09.023

15

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.

edited Mar 04 '15 at 11:20

answered Apr 28 '14 at 22:08

jssor

6,995
2
18
21

thx, i just opened that demo html and replaced the code but somehow all width still 1300px any ideas ? – test Apr 28 '14 at 22:25
Works great for me too. Thank you jssor – baroquedub May 29 '14 at 19:52
I got the same problem. Width 1300px. Somehow, container goes off the screen? any idea? – Kashama Shinn Sep 13 '14 at 09:42
Please see http://www.jssor.com/testcase/full-screen-slider.source.html. Please update me if there is any problem. – jssor Sep 13 '14 at 10:39
still dont get any luck. only nav 1, 2, 3, 4 go down to bottom-center slider goes to its origin size. – Kashama Shinn Sep 13 '14 at 14:03
full screen slider shows a vertical scroll bar. Can we get rid of it? – Savaratkar Sep 28 '14 at 08:45
3

add 'overflow: hidden' to body element. – jssor Sep 28 '14 at 10:50
for those who are facing problem of fixed width please replace the above code properly it will work ... and thanks @jssor for great work – himanshu Oct 11 '14 at 08:58
On which file should I add the above js @jssor ? – AndrewL64 Jun 28 '15 at 11:59
@Andrew Lyndem Please open `view-source:http://www.jssor.com/testcase/full-screen-slider.source.html` with chrome browser. – jssor Jun 28 '15 at 22:49
I was using the jssor wordpress plugin and was having a hard-time finding a way to append the above to the script as it is dynamically generated. Figurd it out though :) – AndrewL64 Jun 28 '15 at 23:06

jssor · Answer 2 · 2015-02-14T00:41:29.997

There is a new api $ScaheHeight with Jssor Slider 17.0 or later.

//responsive code begin
//you can remove responsive code if you don't want the slider to scale along with window
function ScaleSlider() {
    var windowWidth = $(window).width();

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

        if (originalWidth / windowWidth > originalHeight / windowHeight) {
            jssor_slider1.$ScaleHeight(windowHeight);
        }
        else {
            jssor_slider1.$ScaleWidth(windowWidth);
        }
    }
    else
        window.setTimeout(ScaleSlider, 30);
}

ScaleSlider();

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

Reference: http://www.jssor.com/testcase/full-screen-slider-new-api.source.html

score 1 · Answer 3 · 2015-02-28T14:29:06.293

1

Based on the answers above, I got it working, but the "slider1_container" div should be wrapped like this:

<div style="position: relative; width: 100%; overflow: hidden;">

    <div style="position: relative; left: 50%; width: 5000px; text-align: center; margin-left: -2500px;">


 <div id="slider1_container"> 
 ... 
 ... 
 </div>


 </div>
</div>

edited Feb 28 '15 at 14:29

answered Feb 16 '15 at 01:36

If I try to do this I get jquery error Uncaught Error: Cannot scale jssor slider, 'width' of 'outer container' not specified. Please specify 'width' in pixel. e.g. 'width: 600px;', So I am not able to set the width in % – user3763117 Feb 27 '15 at 10:31
Are you using the latest jssor version? – Feb 28 '15 at 11:12

jssor full height or full screen slider / possible?

3 Answers3

Linked