タッチイベントでのスライド機能を追加させたい

Question

http://tsukulog.net/archives/2083

このサイトを参考にスライドを作ったのですが、タッチイベントでスライドするような機能を作りたいです。

Comments

[muyzns]

>をタッチするとスライドしませんか？

[Yoshihir]

スマートフォンで画像を触るとslideするようにさせたいです。

[kei344]

過去の質問について、「解決済」になっていないものが多数見受けられます。解決したものは「ベストアンサー」を選び、自力で解決した場合はその方法を解答欄に書き、もし万が一解決していないのであれば質問を編集するなどしてみてください。

Answer 1

$(function() {
$('#slides').on('touchstart', onTouchStart); //指が触れたか検知
$('#slides').on('touchmove', onTouchMove); //指が動いたか検知
$('#slides').on('touchend', onTouchEnd); //指が離れたか検知
var direction, position;

  //スワイプ開始時の横方向の座標を格納
  function onTouchStart(event) {
    position = getPosition(event);
    direction = ''; //一度リセットする
  }

  //スワイプの方向（left／right）を取得
  function onTouchMove(event) {
    if (position - getPosition(event) > 70) { // 70px以上移動しなければスワイプと判断しない
      direction = 'left'; //左と検知
    } else if (position - getPosition(event) < -70){  // 70px以上移動しなければスワイプと判断しない
      direction = 'right'; //右と検知
    }
  }

  function onTouchEnd(event) {
    if (direction == 'right'){
      slider(current + 1);
    } else if (direction == 'left'){
      slider(current - 1);
    }
  }

  //横方向の座標を取得
  function getPosition(event) {
    return event.originalEvent.touches[0].pageX;
  }
});