여러 번 슬라이드 슬라이더

Question

이벤트 리스너 인 touchstart 및 touchmove이있는 슬라이더를 만들려고합니다.

슬라이더는 버튼을 클릭하면 아주 잘 작동합니다. 그러나 손가락을 왼쪽에서 오른쪽으로 움직이면 마지막 이미지까지 여러 번 슬라이드되지만 한 번만 움직여야합니다. 또한 뒤로 슬라이드 할 수 없습니다.

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', '>'); 
    } 
    } 
} 

handleTouchMove 기능에 이상이 있어야합니다. 어떻게 해결할 수 있습니까?

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; 
} 

여기 부울 값을 사용 번만를 확인한 jsFiddle이다. 터치 이동시 다음 기능이 매 이동마다 호출되었습니다.