jssor jQuery對Safari瀏覽器沒有反應

Question

在谷歌瀏覽器和火狐瀏覽器中工作正常，但在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 

Answer 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