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

在jssor滑块中缩放

1 个答案: