jQuery Swiper

jQuery Swiper

PC, Mobile 2가지 환경에서 사용하기 위해 2가지 이벤트를 한번에 줘야 한다.

초기 Y값과 마지막(드래그 후) Y값을 비교하여 어떤 방향으로 swipe 되었는지 if문을 사용해 걸러낸다.

 

이벤트 주기

$('선택자').on(touchstart mousedown)
$('선택자').on(touchend mouseup)

 

페이지 Y좌표 구하기

startY = e.pageY; // pc(마우스)
e.originalEvent.touches[0].pageY; // touchstart Y좌표 모바일(터치)
e.originalEvent.changedTouches[0].pageY; // touchend Y좌표 모바일(터치)

 

start, down 과 end, up Y좌표 비교하기

if( startY < endY ){
     // 아래로 터치 시 실행
} else {
     // 위로 터치 시 실행
}

 

 

JavaScript

$(document).ready(function(){  		
    
    var startY, endY;

    $('.wrap').on('touchstart mousedown',function(e){
        e.preventDefault();

        startY=e.pageY || e.originalEvent.touches[0].pageY;
        $('body').append(startY + '<br>');
    });
    
    
    $('.wrap').on('touchend mouseup',function(e){
        e.preventDefault();

        endY=e.pageY || e.originalEvent.changedTouches[0].pageY;
        $('body').append(endY + '<br>');

        if(startY<endY) {
            $('body').append(' 아래로 터치드래그' + '<br>');
            $('.wrap').css('background','#f00');
        }else{
            $('body').append(' 위로 터치드래그' + '<br>');
            $('.wrap').css('background','#0f0');
        }

    });


});