터치 이미지 슬라이드 관련 참고 자료

jQueryMobile의 swipteleft, swipright를 쓰지 않고 모바일에서 손가락 터치에 반응하도록 구현 방법입니다.
jQuery 터치 이벤트 중 하나인 touchstart와 touchmove를 사용하면 간단합니다.
nextSlide를 다음 화면으로 슬라이드 하는 이벤트, prevSlide를 이전 화면으로 슬라이드하는 이벤트라 가정해 보면 아래 같이 간단하게 구현할 수 있습니다.

var startX = {};
var endX = {};

$slider.on({
  '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를 호출하면 됩니다.

 

TouchSwipe 플러그인 사용하기

TouchSwipe Demo

var IMG_WIDTH = 500;
var currentImg = 0;
var maxImages = 3;
var speed = 500;
var imgs = $("#imgs");

imgs.swipe( {
  triggerOnTouchEnd: true,
  swipeStatus: swipeStatus,
  allowPageScroll: "vertical"
});

function swipeStatus(event, phase, direction, distance, fingers) {
  if( phase == "move" && (direction == "left" || direction == "right") ) {
    var duration=0;

    if (direction == "left")
      scrollImages((IMG_WIDTH * currentImg) + distance, duration);
    else if (direction == "right")
      scrollImages((IMG_WIDTH * currentImg) - distance, duration);
      
  } else if ( phase == "cancel") {
  
    scrollImages(IMG_WIDTH * currentImg, speed);
    
  } else if ( phase =="end" ) {
  
    if (direction == "right")
      previousImage()
    else if (direction == "left")
      nextImage()
      
  }
}

function previousImage() {
  currentImg = Math.max(currentImg-1, 0);
  scrollImages( IMG_WIDTH * currentImg, speed);
}

function nextImage() {
  currentImg = Math.min(currentImg+1, maxImages-1);
  scrollImages( IMG_WIDTH * currentImg, speed);
}

function scrollImages(distance, duration) {
  imgs.css("-webkit-transition-duration", (duration/1000).toFixed(1) + "s");
  var value = (distance<0 ? "" : "-") + Math.abs(distance).toString();
  imgs.css("-webkit-transform", "translate3d("+value +"px,0px,0px)");
}

<div id="imgs">
  <img src="http://www.awwwards.com/awards/images/2013/02/touchswipe-img-1.png" />
  <img src="http://www.awwwards.com/awards/images/2013/02/touchswipe-img-2.png" /> 
  <img src="http://www.awwwards.com/awards/images/2013/02/touchswipe-img-3.png" />
</div>