ｊQueryを使用してのフリック操作　2枚目以降、うまく反応しない

前提・実現したいこと

ｊQueryを使用してフリック操作を実装したいです。
指を動かしている間は .swipe-photo-container が移動し、離したときに一番近い要素の位置までアニメーションします。

発生している問題・エラーメッセージ

左右に50px以上フリックしないと画像が動かないように作成しました。
一枚目の画像はうまくいくのですが、二枚目以降はうまく反応せずクリックするだけでも
画像が流れて行っていまいます。

該当のソースコード

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title></title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="swipe-photo">
    <ul class="swipe-photo-container clearfix">
        <li class="swipe-photo-item"><img src="img/0.jpg" class="swipe-photo-thumbnail"></li>
        <li class="swipe-photo-item"><img src="img/1.jpg" class="swipe-photo-thumbnail"></li>
        <li class="swipe-photo-item"><img src="img/2.jpg" class="swipe-photo-thumbnail"></li>
        <li class="swipe-photo-item"><img src="img/3.jpg" class="swipe-photo-thumbnail"></li>
        <li class="swipe-photo-item"><img src="img/4.jpg" class="swipe-photo-thumbnail"></li>
        <li class="swipe-photo-item"><img src="img/5.jpg" class="swipe-photo-thumbnail"></li>
    </ul>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">

"use strict";

$(function() {
    var $swipe = $(".swipe-photo-container"),
        $swipeList = $swipe.find(".swipe-photo-item"),
        $swipeImg = $swipe.find(".swipe-photo-thumbnail"),
        swipeImgLength = $swipeImg.length,
        swipeImgWidth = $swipeImg.width(),
        direction = '',
        swipe = 0,
        undefined = {
            x:undefined,
            thisX:undefined,
            startX:undefined,
            moveX:undefined
        };

    $swipe.width(swipeImgLength * swipeImgWidth);

    $swipeList.on( {
        touchstart: function(e) {
            undefined.$thisX = parseInt($swipe.css("left"));
            undefined.$startX = e.originalEvent.changedTouches[0].pageX - undefined.$thisX;
        },

        touchmove: function(e) {
            undefined.$moveX = e.originalEvent.changedTouches[0].pageX - undefined.$thisX;

            directionImg();
        },

        touchend: function() {
            
            swipeImg(direction);
        }
    });

    function directionImg() {
        if (undefined.$startX - undefined.$moveX > 50) { //50px以上右にフリックした場合
            direction = "right";
            console.log(direction);
        } else if (undefined.$startX - undefined.$moveX < -50) { //50px以上左にフリックした場合
            direction = "left";
            console.log(direction);
        } 
    };

    function swipeImg(direction) {
        if (direction == "right") {
            swipe++;
            if(swipe < swipeImgLength) {
                $swipe.stop(true, false).animate( {
                    left: swipe * -swipeImgWidth
                    }, 500);
                } else {
                swipe = 0;
                $swipe.animate( {
                    left: 0
                }, 500);
            }

        } else if (direction == "left") {
            swipe--;
            if (swipe < 0) {
                swipe = swipeImgLength - 1;
                $swipe.animate( {
                    left: swipe * -swipeImgWidth
                }, 500);
            } else {
                $swipe.stop(true, false).animate( {
                    left: swipe * -swipeImgWidth
                }, 500);
            }
        } 
    }
});
</script>
</body>
</html>