9

http://www.jssor.com/demos/full-width-slider.htmlこのデモをフルスクリーンの高さにすることは可能ですか? スーパーサイズのカルーセルのようにhttp://buildinternet.com/project/supersized/slideshow/3.2/demo.html

ありがとう

4

3 に答える 3

16

次のコードを使用して、スライダーを全画面表示にスケーリングしてください。

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

ソース コード付きのフル スクリーン スライダーをご覧ください。

于 2014-04-28T22:08:30.757 に答える
3

Jssor Slider 17.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

于 2014-10-15T09:29:21.357 に答える
1

上記の回答に基づいて、私はそれを機能させましたが、「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>
于 2015-02-16T01:36:12.213 に答える