carousel(슬라이드 갤러리) 반응형 웹 적용하기 반응형웹

아래와 같은 carousel(슬라이드 갤러리) 을 반응형 웹에 적용하다 보면, 흔히 부딪히는 문제가 손가락 터치로 반응하도록 하는 문제다.

사실, 모바일에서 좌우측의 작은 화살표만으로 터치 반응을 주는 것은 위험하다. 사용자들에게는 아주 짜증나는 경험이 될 것이다.

(물론, 개인적으로 나는 이런 레이아웃이 그리 좋다고는 생각하지 않는다. 그냥 ‘홍보영상’ 링크만 타고 들어가면 될 것을 뭐하러 짜증나게 저 슬라이드를 이리저리 돌려보겠는가. 하지만, 일부 디자이너나 기획자들이 이를 막무가내로 요구하면 딱히 대안이 없다….

)

jquerymobile의 swipteleft, swipright를 쓰지 않고 모바일에서 손가락 터치에 반응하도록 하는 방법은 아래와 같다.

jquery 모바일 터치 이벤트 중 하나인 touchstart와 touchmove를 사용하면 간단하다.

'nextSlide'를 다음화면으로 슬라이드하는 이벤트, 'prevSlide'를 이전 화면으로 슬라이드하는 이벤트라 가정하면,

var startX = {};
var endX = {};
$sliderControls.prev().bind({
    'touchstart':function(e){
        startX = event.touches[0].pageX;
    },
   'touchmove':function(e){
       endX = event.touches[0].pageX;
       var fnX = startX - endX; 
        if(fnX>0) { $slider.trigger( 'nextSlide' ); }
        if(fnX <= 0) { $slider.trigger( 'prevSlide' ); }
    }
});

위와 같이 간단하게 구현할 수 있다. touchstart는 모바일 터치하는 순간의 좌표값을 반환할 때 사용하고, touchmove는 손가락을 떼는 순간의 좌표값을 반환할 수 있으므로, 이 두 개를 비교해 touchmove의 값이 크면 손가락을 오른쪽으로 밀어낸 경우이고, touchmove의 값이 작다면 손가락을 왼쪽으로 당긴 경우이다.


이 값을 비교해 값이 +이면 'nextSlide'를 호출하고, 값이 –이면 'prevSlide'를 호출하면 간단하다.


덧글

댓글 입력 영역