सफारी सीएसएस बीएक्सस्लाइडर

Question

के साथ समस्या को घुमाएं मैंने 360 डिग्री के सीएसएस रोटेशन के साथ bxSlider बनाया है। सफारी को छोड़कर यह सभी ब्राउज़रों में ठीक काम कर रहा है।

क्या कोई इस से मेरी सहायता कर सकता है? कृपया लिंक here खोजें। नीचे दिए गए कोड:

$('#TestimonialUL').bxSlider({ 
    pager: false, 
    mode: 'fade', 
    onSliderLoad: function() { 
     $('#TestimonialUL > li').eq(0).addClass('active-slide'); 
    }, 
    onSlideNext: function(){ 
     $('#TestimonialUL').css({ 
      'transition': 'transform 0.8s cubic-bezier(1, 0, 0, 1) 0s', 
      '-o-transition': 'transform 0.8s cubic-bezier(1, 0, 0, 1) 0s', 
      '-moz-transition': 'transform 0.8s cubic-bezier(1, 0, 0, 1) 0s', 
      '-webkit-transition': 'transform 0.8s cubic-bezier(1, 0, 0, 1) 0s', 
      '-moz-backface-visibility': 'hidden', 
      '-webkit-backface-visibility': 'hidden', 
      'backface-visibility': 'hidden', 
      '-o-transform': 'rotateY(-360deg)', 
      '-moz-transform': 'rotateY(-360deg)', 
      '-webkit-transform': 'rotateY(-360deg)', 
      'transform': 'rotateY(-360deg)' 
     }); 

     $('.client-innerBG .bx-viewport').css({ 
      '-o-perspective': '800px', 
      '-moz-perspective': '800px', 
      '-webkit-perspective': '800px', 
      'perspective': '800px', 
      '-webkit-transform-origin': 'top left', 
      'transform-origin': 'top left', 
      '-webkit-transform-style': 'preserve-3D', 
      'transform-style': 'preserve-3D' 
     });  

    }, 
    onSlidePrev: function(){ 
     $('#TestimonialUL').css({ 
      '-o-transition':'transform 0.8s cubic-bezier(1, 0, 0, 1) 0s', 
      '-moz-transition':'transform 0.8s cubic-bezier(1, 0, 0, 1) 0s', 
      '-webkit-transition':'transform 0.8s cubic-bezier(1, 0, 0, 1) 0s', 
      'transition':'transform 0.8s cubic-bezier(1, 0, 0, 1) 0s', 
      '-webkit-backface-visibility':'hidden', 
      'backface-visibility':'hidden', 
      '-o-transform': 'rotateY(360deg)', 
      '-moz-transform': 'rotateY(360deg)', 
      '-webkit-transform': 'rotateY(360deg)', 
      'transform': 'rotateY(360deg)' 
     }); 
     $('.client-innerBG .bx-viewport').css({ 
      '-o-perspective': '800px', 
      '-moz-perspective': '800px', 
      '-webkit-perspective': '800px', 
      'perspective': '800px', 
      '-webkit-transform-origin': 'top left', 
      'transform-origin': 'top left', 
      '-webkit-transform-style': 'preserve-3D', 
      'transform-style': 'preserve-3D' 
     }); 

    }, 
    onSlideAfter: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) { 
     //console.log(currentSlideHtmlObject); 
     $('.active-slide').removeClass('active-slide'); 
     $('#TestimonialUL > li').eq(currentSlideHtmlObject).addClass('active-slide'); 

     $('#TestimonialUL').css({ 
      'transition':'0', 
      '-o-transition':'0', 
      '-moz-transition':'0', 
      '-webkit-transition':'0', 
      '-moz-backface-visibility': 'hidden', 
      '-webkit-backface-visibility': 'hidden', 
      'backface-visibility': 'hidden', 
      '-o-transform': 'rotateY(0deg)', 
      '-moz-transform': 'rotateY(0deg)', 
      '-webkit-transform': 'rotateY(0deg)', 
      'transform': 'rotateY(0deg)' 
     }); 
     $('.client-innerBG .bx-viewport').attr('style',''); 

    } 

}); 

Answer 1

जब आप सीएसएस नियम का उपयोग -webkit-transition आप नियम को बदलने के संदर्भ के लिए की जरूरत है। वेबकिट के मामले में आपको transform नियम के बजाय -webkit-transform नियम का संदर्भ देना होगा।

तो '-webkit-transition': 'transform 0.8s cubic-bezier(1, 0, 0, 1) 0s''-webkit-transition': '-webkit-transform 0.8s cubic-bezier(1, 0, 0, 1) 0s' होने की आवश्यकता होगी।

देखभाल करें, आपको -moz प्रीफिक्स्ड नियम के साथ फ़ायरफ़ॉक्स के पुराने संस्करणों को बेहतर तरीके से लक्षित करने के लिए भी ऐसा करने की आवश्यकता हो सकती है।