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

Question

尝试让 JSSOR Slider 在移动设备上以纵向和横向模式工作。

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

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

• 纵向模式下的父容器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);

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

        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

这是“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