Question

尝试在纵向和横向模式下使JSSOR Slider在移动设备上运行。

问题：“缩放到：窗口高度”选项适用于横向，但它对于纵向来说太高了。 “缩放到：窗口宽度”选项适用于纵向，但它对于横向来说太宽。

如何组合这两个代码段，以使滑块适合：

处于纵向模式

宽度

处于横向模式

高度

“parent-container-width”的响应代码：

        function ScaleSlider() {
            var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
            if (refSize) {
                jssor_1_slider.$ScaleWidth(refSize);
            }
            else {
                window.setTimeout(ScaleSlider, 30);
            }
        }
        ScaleSlider();
        $Jssor$.$AddEvent(window, "load", ScaleSlider);
        $Jssor$.$AddEvent(window, "resize", ScaleSlider);
        $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);

“parent-container-height”的响应代码：

        function ScaleSlider() {
            var refSize = jssor_1_slider.$Elmt.parentNode.clientHeight;
            if (refSize) {
                jssor_1_slider.$ScaleHeight(refSize);
            }
            else {
                window.setTimeout(ScaleSlider, 30);
            }
        }
        ScaleSlider();
        $Jssor$.$AddEvent(window, "load", ScaleSlider);
        $Jssor$.$AddEvent(window, "resize", ScaleSlider);
        $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);

我确信对于熟悉JS的人来说这很容易，但我的知识很遗憾。

P.S。理想情况下，如果可以在横向模式下缩放，只需将主图像缩放到屏幕高度，将缩略图和项目符号放在屏幕边缘下方（在移动设备上不需要它们），用户可以向左/向右滑动，我也很乐意看到这个解决方案。

Answer 1

以下是'examples / full-screen-contain-in-window.html'

中的代码

//responsive code begin
//remove responsive code if you don't want the slider to scale while window scaling
function ScaleSlider() {
    var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0];

    var windowWidth = w.innerWidth || e.clientWidth || g.clientWidth;

    if (windowWidth) {
        var windowHeight = w.innerHeight || e.clientHeight || g.clientHeight;

        var originalWidth = jssor_slider1.$OriginalWidth();
        var originalHeight = jssor_slider1.$OriginalHeight();

        if (originalWidth / windowWidth > originalHeight / windowHeight) {
            jssor_slider1.$ScaleWidth(windowWidth);

            var scaleHeight = jssor_slider1.$ScaleHeight();
            $Jssor$.$Css(wrapperElement, "marginTop", ((windowHeight - scaleHeight) / 2) + "px");
        }
        else {
            jssor_slider1.$ScaleHeight(windowHeight);
            $Jssor$.$Css(wrapperElement, "marginTop", "0px");
        }
    }
    else
        window.setTimeout(ScaleSlider, 30);
}

ScaleSlider();

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

JSSOR Slider - 响应模式 - 结合宽度和高度限制

1 个答案: