Jssor full height or full screen slider / maybe?

Question

Can this demo be made http://www.jssor.com/demos/full-width-slider.html full screen height? like a super carousel http://buildinternet.com/project/supersized/slideshow/3.2/demo.html

thanks

Answer 1

use the following code for a full screen slider,

 //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 the Full Screen Source Slider .

Answer 2

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 

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

Answer 3

Based on the answers above, I got it working, but the div "slider1_container" 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>