छवि स्लाइडर चकाचौंध

Question

मैंने एक सादा जावास्क्रिप्ट/सीएसएस छवि स्लाइडर को एक साथ रखा है, केवल एक सीखने के अभ्यास के रूप में शुरू किया है, लेकिन अब मैं इसे वास्तविक दुनिया में लागू करने के लिए देख रहा हूं। समस्या यह है कि एनीमेशन मेरे डेस्कटॉप पर चकाचौंध है (जो एक वी। उच्च स्पेक गेमिंग रिग है) - और मोबाइल पर भी बदतर (डिग्री के लिए यह वास्तव में एक एनीमेशन नहीं है)

आप इसे क्रिया में देख सकते हैं यहाँ:

www.chrishowie.co.uk/sands/

jsfiddle उचित कोड के बहुत अलग कर - यह नहीं है एक "यह काम नहीं करता" मुद्दा है, इसलिए उम्मीद है कि बेला यह अनुकूलन में मदद करने के लिए पर्याप्त देता है ।

http://jsfiddle.net/9aozrxy8/5/

सारांश में: मैं एक पंक्ति में 4 छवियों के साथ एक DIV है, प्रत्येक छवि 100% पृष्ठ की चौड़ाई है। मैं अनुवाद करने के लिए जावास्क्रिप्ट का उपयोग करता हूं (मैंने अनुवाद 3 डी की कोशिश की है जैसा कि यह GPU का उपयोग करता है, लेकिन बहुत अलग नहीं किया है) और मैंने आसानी से बदलने के लिए सीएसएस संक्रमण सेट किया है।

मैंने यह भी सोचा कि संभावित रूप से मैं इस साइट पर बहुत कुछ करने की कोशिश कर रहा हूं - लेकिन फिर मैं कुछ और साइटों को देखता हूं जो बहुत अधिक हैं और यह रेशम के रूप में चिकनी है। तो मुझे लगता है कि मुझे कुछ याद आ रही है।

function slideRight() { 

if (sliding) { 
    return false 
}; 
window.sliding = true; 

el = document.getElementById("slider"); 
cst = getComputedStyle(el); 
transformst = cst.transform || cst.webkitTransform || cst.mozTransform; 
widthst = cst.width; 
widthst = widthst.replace("px", ""); // computed width of slider (7680px) 
slidewidth = widthst/4; 

transformst = transformst.replace("matrix(", ""); 
transformst = transformst.replace(")", ""); 

transformst = transformst.split(","); 
transformst = transformst[4]; // returns current transform in px without unit (px) 
if (!transformst) { 
    transformst = 0; 
} 

var activebtn = "sldr" + Math.round((Number(transformst)/(-1 * slidewidth))); 
document.getElementById(activebtn).classList.remove("sliderbuttonactive"); 

if (activebtn != "sldr3") { 
    document.getElementById("slider" + Math.round((2 + Number(transformst)/(-1 * slidewidth)))).style.visibility = "visible"; 
    document.getElementById("slider" + Math.round((2 + Number(transformst)/(-1 * slidewidth)))).style.display = "initial"; 
    document.getElementById("slider").style.transform = "translate3d(" + 25 * ((Number(transformst)/(slidewidth)) - 1) + "%, 0, 0)"; 
    document.getElementById("slider").style.transform = "-webkit-translate3d(" + 25 * ((Number(transformst)/(slidewidth)) - 1) + "%, 0, 0)"; 
    document.getElementById("slider").style.transform = "-moz-translate3d(" + 25 * ((Number(transformst)/(slidewidth)) - 1) + "%, 0, 0)"; 
    document.getElementById("slider").style.transform = "-ms-translate3d(" + 25 * ((Number(transformst)/(slidewidth)) - 1) + "%, 0, 0)"; 
    document.getElementById("leftslidebtn").style.visibility = "visible"; 
    document.getElementById("leftslidebtn").style.display = "block"; 
} 

activebtn = activebtn.replace("sldr", ""); 
activebtn = "sldr" + (1 + Number(activebtn)); 

document.getElementById(activebtn).classList.add("sliderbuttonactive"); 

if (Number(activebtn.replace("sldr", "")) == 3) { 
    document.getElementById("rightslidebtn").style.visibility = "hidden"; 
    document.getElementById("rightslidebtn").style.display = "none"; 
} 

setTimeout(function() { 
    window.sliding = false 
}, 2000); 

}

अद्यतन: अभी भी समाधान नहीं है, लेकिन मोबाइल पर मैं इसे छोटे स्क्रीन है और यह भी दिखाई नहीं दे रहा छवियों कि ऑफ स्क्रीन हैं के लिए छवि का आकार कम करने के द्वारा प्रयोग करने योग्य बना दिया है। पूरी तरह चिकनी नहीं है लेकिन वहां जा रहा है।

धन्यवाद एक बहुत,

सी

Answer 1

जैसा जेरेमी उल्लेख किया है, कि "संक्रमण" अपने JSFiddle में समस्या का कारण है, यह भी यह अपनी वेबसाइट पर पैदा कर रहा है।

लाइन 221 में अपने "Main.css" में। "संक्रमण: शीर्ष आसानी 2s;" निकालें कक्षा से .slide

सब कुछ Win8.1/गूगल क्रोम/i7 पर तो ठीक काम करता है