Jssor Slider 在 GoTo() 方法上删除全宽（比例）

Question

我正在玩 JSSOR 滑块，在我们使用 GoTo() 方法转到指定的幻灯片之前，它在全角模式下运行完美。例如，当幻灯片在幻灯片 (0) 处初始化时（无 GoTo()），ScaleSlider() 起作用。但是当我们尝试强制显示幻灯片 (22) 时，滑块显示在默认边界 (960x640) 内。也许这是由于使用了LazyLoad()？但默认情况下（没有 GoTo()），它可以与 LazyLoad 一起正常工作。

我默认使用几乎所有的东西，主要代码没有变化，即使在选项中，也只是添加了字符串

var jssor_slider_go = new $JssorSlider$("jssor_1");
jssor_slider_go.$GoTo(22);

在 jssor 容器强制执行 GoTo() 方法之后。顺便说一句，该方法工作正常。

...

<script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/js/jssor.slider.min.js"></script>

    <script type="text/javascript">
        jQuery(document).ready(function ($) {

            var jssor_1_options = {
              $AutoPlay: 0,
              $Idle: 2000,
              $SlideEasing: $Jease$.$InOutSine,
              $DragOrientation: 3,
              $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$
              },
              $BulletNavigatorOptions: {
                $Class: $JssorBulletNavigator$
              }
            };

            var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);

            jssor_1_slider.$Elmt.style.margin = "";


            var MAX_WIDTH = 10000;
            var MAX_HEIGHT = 10000;
            var MAX_BLEEDING = 0.1;

            function ScaleSlider() {
                var containerElement = jssor_1_slider.$Elmt.parentNode;
                var containerWidth = containerElement.clientWidth;

                if (containerWidth) {
                    var originalWidth = jssor_1_slider.$OriginalWidth();
                    var originalHeight = jssor_1_slider.$OriginalHeight();

                    var containerHeight = containerElement.clientHeight || originalHeight;

                    var expectedWidth = Math.min(MAX_WIDTH || containerWidth, containerWidth);
                    var expectedHeight = Math.min(MAX_HEIGHT || containerHeight, containerHeight);

                    jssor_1_slider.$ScaleSize(expectedWidth, expectedHeight, MAX_BLEEDING);

                    jssor_1_slider.$Elmt.style.top = ((containerHeight - expectedHeight) / 2) + "px";

                    jssor_1_slider.$Elmt.style.left = ((containerWidth - expectedWidth) / 2) + "px";
                }
                else {
                    window.setTimeout(ScaleSlider, 30);
                }
            }

            function OnOrientationChange() {
                ScaleSlider();
                window.setTimeout(ScaleSlider, 800);
            }

            ScaleSlider();

            $(window).bind("load", ScaleSlider);
            $(window).bind("resize", ScaleSlider);
            $(window).bind("orientationchange", OnOrientationChange);
        });

    </script>

    <style>
        html, body {
            position:absolute;
            margin: 0;
            padding: 0;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }


        .jssorl-009-spin img {
            animation-name: jssorl-009-spin;
            animation-duration: 1.6s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

        @keyframes jssorl-009-spin {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }


        .jssorb064 {position:absolute;}
        .jssorb064 .i {position:absolute;cursor:pointer;}
        .jssorb064 .i .b {fill:#000;fill-opacity:.5;stroke:#fff;stroke-width:400;stroke-miterlimit:10;stroke-opacity:0.5;}
        .jssorb064 .i:hover .b {fill-opacity:.8;}
        .jssorb064 .iav .b {fill:#ffe200;fill-opacity:1;stroke:#ffaa00;stroke-opacity:.7;stroke-width:2000;}
        .jssorb064 .iav:hover .b {fill-opacity:.6;}
        .jssorb064 .i.idn {opacity:.3;}

        .jssora051 {display:block;position:absolute;cursor:pointer;}
        .jssora051 .a {fill:none;stroke:#fff;stroke-width:360;stroke-miterlimit:10;}
        .jssora051:hover {opacity:.8;}
        .jssora051.jssora051dn {opacity:.5;}
        .jssora051.jssora051ds {opacity:.3;pointer-events:none;}
    </style>

<div style="position:relative;top:0;left:0;width:100%;height:100%;overflow:hidden;">
        <div id="jssor_1" style="position:relative;margin:0 auto;top:0px;left:0px;width:960px;height:640px;overflow:hidden;visibility:hidden;">
            <!-- Loading Screen -->

            <div data-u="loading" class="jssorl-009-spin" style="position:absolute;top:0px;left:0px;width:100%;height:100%;text-align:center;background-color:rgba(0,0,0,0.7);">
                <img style="margin-top:-19px;position:relative;top:50%;width:38px;height:38px;" src="../svg/loading/static-svg/spin.svg" />
            </div>

            <div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;margin:0 auto; width:960px; height:640px; overflow:hidden;">


            <div>
            <img data-u="image" data-src2="/images/gallery424/20190724123946_20.jpg">
            </div>

            <div>
            <img data-u="image" data-src2="/images/gallery424/20190724123946_19.jpg">
            </div>

            <div>
            <img data-u="image" data-src2="/images/gallery424/20190724123945_18.jpg">
            </div>

            </div>

            <!-- Arrow Navigator -->
            <div data-u="arrowleft" class="jssora051" style="width:55px;height:55px;top:0px;left:25px;" data-autocenter="2" data-scale="0.75" data-scale-left="0.75">
                <svg viewBox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
                    <polyline class="a" points="11040,1920 4960,8000 11040,14080 "></polyline>
                </svg>
            </div>
            <div data-u="arrowright" class="jssora051" style="width:55px;height:55px;top:0px;right:25px;" data-autocenter="2" data-scale="0.75" data-scale-right="0.75">
                <svg viewBox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
                    <polyline class="a" points="4960,1920 11040,8000 4960,14080 "></polyline>
                </svg>
            </div>
        </div>
    </div>
</div>

<script>
var jssor_slider_go = new $JssorSlider$("jssor_1");
jssor_slider_go.$GoTo(22);
</script>

...

Answer 1

出于某种原因，var jssor_slider_go = new $JssorSlider$("jssor_1"); 以延迟模式初始化。也就是说，`jssor_slider_go.$GoTo(22);'在 jssor 滑块初始化之前无法工作。

使用以下方法之一作为解决方法，

var jssor_1_options = { $StartIndex: 22 };

var jssor_slider_go = new $JssorSlider$("jssor_1", jssor_1_options);

见https://www.jssor.com/development/api-options.html
使用setTimeout到运行jssor_slider_go.$GoTo(22);

Answer 2

好一个：

var jssor_1_options = {
$StartIndex: 14,
$AutoPlay: 0,
$Idle: 2000,
$SlideEasing: $Jease$.$InOutSine,
$DragOrientation: 3,
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$
}
};

var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);

然后：

var MAX_WIDTH = 10000;
var MAX_HEIGHT = 10000;
var MAX_BLEEDING = 0;

Jssor Slider 在 GoTo() 方法上删除全宽（比例）

Jssor Slider drops Full Width (scale) on GoTo() method

jssor