Slider Slides viele Male

Question

Ich versuche, einen Schieberegler mit Ereignislistener touchstart und touchmove zu erstellen.

Der Schieberegler funktioniert sehr gut, wenn Sie auf die Schaltflächen klicken. Wenn Sie jedoch Ihren Finger von links nach rechts bewegen, gleitet er viele Male bis zum letzten Bild, aber nur einmal. Du kannst auch nicht zurück rutschen.

var i = 0; 

// Go next 
$('.next').bind('click', function() {   
    niceSlider('left', '<'); 
}); 

// Go Back 
$('.back').bind('click', function() { 
    niceSlider('right', '>', 0); 
}); 

// Greather or less 
function greatherOrLess(num1, operator, num2) { 
    if (operator == '<') { 
    return (num1 < num2) ? true : false; 
    } 
    else if (operator == '>') { 
    return (num1 > num2) ? true : false; 
    } 
} 

// Slider 
function niceSlider(direction, operator, NumberOfAllImages = 4, position = 600) { 
    var direction = (direction == 'left') ? '-' : '+'; 
    if (greatherOrLess(i, operator, NumberOfAllImages)) { 
    if (direction == '+' || direction == '-') { 
     $('li').animate({'left': direction + '=600px'}, 300).delay(600); 
     x = (direction == '-') ? i++ : i--; 
    } 
    } 
    console.log($('li:first').position().left); 
    console.log(x); 
} 

// Event Listener 
var slider = document.querySelector('.slider'); 
slider.addEventListener('touchstart', handleTouchStart, false); 
slider.addEventListener('touchmove', handleTouchMove, false); 

// Start from touch 
function handleTouchStart(evt) { 
    startClientX = evt.touches[0].clientX; 
    startClientY = evt.touches[0].clientY; 
} 

// Move from touch 
function handleTouchMove(evt) { 
    moveClientX = evt.touches[0].clientX; 
    moveClientY = evt.touches[0].clientY; 

    var diffClientX = startClientX - moveClientX; 
    var diffClientY = startClientY - moveClientY; 

    if (Math.abs(diffClientX) > Math.abs(diffClientY)) { 
    if (diffClientX > 0) { 
     niceSlider('left', '<'); 
    } 
    else { 
     niceSlider('right', '>'); 
    } 
    } 
} 

Es muss handleTouchMove etwas falsch mit der Funktion sein. Wie kann ich es reparieren?

https://jsfiddle.net/6t1wx95f/16/

Answer 1

function handleTouchStart(evt) { 
    startClientX = evt.touches[0].clientX; 
    startClientY = evt.touches[0].clientY; 
    checkTouch = true; 
} 

// Move from touch 
function handleTouchMove(evt) { 
    moveClientX = evt.touches[0].clientX; 
    moveClientY = evt.touches[0].clientY; 

    if (checkTouch) { 
    var diffClientX = startClientX - moveClientX; 
    var diffClientY = startClientY - moveClientY; 
    if (Math.abs(diffClientX) > Math.abs(diffClientY)) { 
     if (diffClientX > 0) { 
     niceSlider('left', '<'); 
     } else { 
     niceSlider('right', '>', 0); 
     } 
    } 
    checkTouch = false; 
    } 
} 

function handleTouchEnd(evt) { 
    checkTouch = true; 
} 

ist hier jsFiddle, überprüfen Sie es nur einmal für einen Booleschen Wert verwenden. Bei Berührung bewegt sich die nächste Funktion bei jeder Bewegung.