Question

我有两个JSSOR滑块工作，但响应部分仅适用于一个滑块。

即使复制响应代码也不会做任何事情。有人有什么想法吗？

        var jssor_slider1 = new $JssorSlider$("slider1_container", options);
        var jssor_slider2 = new $JssorSlider$("slider2_container", options);
        //responsive code begin
        //you can remove responsive code if you don't want the slider scales while window resizes
        function ScaleSlider() {
            var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
            if (parentWidth)
                jssor_slider1.$ScaleWidth(Math.max(Math.min(parentWidth, 800), 300));
            else
                window.setTimeout(ScaleSlider, 30);
        }
        ScaleSlider();

        $(window).bind("load", ScaleSlider);
        $(window).bind("resize", ScaleSlider);
        $(window).bind("orientationchange", ScaleSlider);
        //responsive code end

    });
</script>

对于所有代码，网站为http://garyedwardrotter.com，带滑块的部分位于摄影部分。刚刚设置的前两个我已经使用了相同的完整代码/滑块设置。

非常感谢任何帮助，谢谢。

Answer 1

请替换

if (parentWidth)
    jssor_slider1.$ScaleWidth(Math.max(Math.min(parentWidth, 800), 300));

与

if (parentWidth) {
    jssor_slider1.$ScaleWidth(Math.max(Math.min(parentWidth, 800), 300));
    jssor_slider2.$ScaleWidth(Math.max(Math.min(parentWidth, 800), 300));
}

Answer 2

我找到的答案是重复此代码以获取您将使用的滑块数量：

function ScaleSlider() { var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth; if (parentWidth) jssor_slider1.$ScaleWidth(Math.max(Math.min(parentWidth, 800), 300)); else window.setTimeout(ScaleSlider, 30); var parentWidth = jssor_slider2.$Elmt.parentNode.clientWidth; if (parentWidth) jssor_slider2.$ScaleWidth(Math.max(Math.min(parentWidth, 800), 300));

JSSOR多个滑块 - 破坏响应

2 个答案: