在 jssor 滑块中缩放

Question

我对这个比例代码很好：

var MAX_WIDTH = 2000;

function ScaleSlider() {
    window.setTimeout(ScaleSlider, 30);
}

ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", ScaleSlider);
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);

但它给滑块带来了问题。 实际上我的滑块选项是这样的：

var jssor_1_options = {
    $AutoPlay: 0,
    $SlideWidth: 200,
    $SlideSpacing: 5,
    $Loop: 0,
    $ArrowNavigatorOptions: {
        $Class: $JssorArrowNavigator$,
        $Steps: 3
    }
}

这意味着由于“$SlideWidth: 200”，它会同时显示许多图像

我使用了 12 张图片。但是当我运行滑块时，它只显示大约 6 或 7 个图像，并且它认为滑块已完成。不能滑动超过这 6 或 7 个。

你应该知道当我删除“$Loop: 0”时它可以正常工作。

这是我的代码示例： https://code.sololearn.com/WQ80P1R1Un0J/#

Answer 1

我检查了你的演示，它可以工作。

编辑 ScaleSlider 函数中缺少响应式代码

jssor_mostsold_slider_init = function() {
    var jssor_1_options = {
        $AutoPlay: 0,
        $SlideWidth: 200,
        $SlideSpacing: 5,
        $Loop: 0,
        $ArrowNavigatorOptions: {
            $Class: $JssorArrowNavigator$,
            $Steps: 3
        }
    };

    var jssor_1_slider = new $JssorSlider$("jssor-mostsold-slider", jssor_1_options);

    /*#region responsive code begin*/

    var MAX_WIDTH = 2000;

    function ScaleSlider() {
            window.setTimeout(ScaleSlider, 30);
    }

    ScaleSlider();
    $Jssor$.$AddEvent(window, "load", ScaleSlider);
    $Jssor$.$AddEvent(window, "resize", ScaleSlider);
    $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
};

请参阅下面的ScaleSlider 示例，

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

    if (containerWidth) {

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

        jssor_1_slider.$ScaleWidth(expectedWidth);
    }
    else {
        window.setTimeout(ScaleSlider, 30);
    }
}