Jssor jQuery 在 safari 上没有响应答案

【问题标题】：Jssor jQuery not responsive on safariJssor jQuery 在 safari 上没有响应
【发布时间】：2023-03-09 20:45:01
【问题描述】：

在 Google Chrome 和 Firefox 中它可以正常工作，但在 safari 中它没有响应。

这是我试过的代码：

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

//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizes
function ScaleSlider() {
    var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
    if (refSize) {
        refSize = Math.min(refSize, 850);
        jssor_1_slider.$ScaleWidth(refSize);
    }
    else {
        window.setTimeout(ScaleSlider, 30);
    }
    console.log(refSize);
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end

【问题讨论】：

标签： javascript jquery safari slider jssor

【解决方案1】：

我在 Safari 中也遇到了这个滑块的响应性问题。滑块使用变换来调整滑块的大小，但旧版本的 safari 仅支持 -webkit-transform。下面的代码将调整滑块的大小。将 width_of_slider 交换为滑块的宽度，看起来是 850。

function ScaleSlider() {
    var parentWidth = $('#slider1_container').parent().width();

    if (parentWidth > 320) {
        jssor_slider1.$ScaleWidth(parentWidth);

        // This whole big block is used to handle old-school safari issues with the css "transform" property

        var inner = $('#slider1_container div').first();
        if (inner.css('-webkit-transform') != ""){
            inner.css('webkit-transform', "scale(" + parentWidth / width_of_slider + ")");
        }
        else {
            inner.attr('style', inner.attr('style') + " -webkit-transform: scale(" + parentWidth / width_of_slider + ");");
        }
        if (inner.css('-webkit-transform-origin') != ""){
            inner.css('webkit-transform-origin', "0px 0px 0px");
        }

    }
    else
        window.setTimeout(ScaleSlider, 30);
}

//Scale slider after document ready
ScaleSlider();

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

【讨论】：