このデモを作成することは可能ですかhttp://www.jssor.com/demos/full-width-slider.html
全画面の高さまで?スーパーサイズのカルーセルのようにhttp://buildinternet.com/project/supersized/slideshow/3.2/demo.html
ありがとう
次のコードを使用して、スライダーを全画面に拡大縮小してください。
//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
スライダーコンテナを包みます
<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>
フルスクリーンスライダー ソースコードをご覧ください。
Jssor Slider17.0以降の新しいAPI $ ScaheHeightがあります。
//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
参照: http://www.jssor.com/testcase/full-screen-slider-new-api.source.html
上記の回答に基づいて、動作しましたが、「slider1_container」divは次のようにラップする必要があります。
<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>