Jssor jQuery не реагирует на сафари

Question

В Google Chrome и Firefox он отлично работает, но в сафари он не реагирует.

Это код, который я попробовал:

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

У меня были некоторые проблемы с отзывчивостью этого ползунка в сафари, а также. Ползунок использует преобразование для изменения размера слайдера, но более старые версии сафари поддерживают только -webkit-transform. Приведенный ниже код изменит размер слайдера. Обмен шириной_ ширины для ширины вашего ползунка, который, как представляется, равен 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