JSSOR滑翔机-响应模式-结合宽度和高度限制

Question

试图使JSSOR滑翔机在移动设备上工作，无论是纵向模式还是横向模式。

问题：“缩放到:窗口高度”选项适用于景观，但对于肖像来说太高了。“缩放:窗口宽度”选项适用于肖像，但对于景观来说太宽了。

如何将这两个代码部分组合起来，使滑块适合：

• 父容器宽度在纵向模式中
• 父容器高度在横向模式中

“父容器宽度”响应代码：

        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);

“父容器高度”响应代码：

        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的人来说都很容易，但是我的知识却很缺乏。

最理想的情况是，如果可以在景观模式下缩放，只需主图像到屏幕的高度，将缩略图和子弹留在屏幕边缘以下(不需要在手机上使用它们，用户可以左右滑动)，我也很想看到这个解决方案。

Answer 1

下面是示例/全屏幕包含在窗口.full中的代码

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