Testing swipe distance plugin original javascript here: http://blog.blakesimpson.co.uk/read/51-swipe-js-detect-touch-direction-and-distance

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <h1>Swipe green box to show effect</h1>
    <div id="device">...</div>
    <div id="note">...</div>
    <div class="mobile">
        <div class="wines">
            <div class="wine"></div>
            <div class="wine"></div>
            <div class="wine"></div>
        </div>
        <div class="choice">
            <div class="no">NO</div>
            <div class="yes">YES</div>
        </div>
        <div class="box box-style"></div>
        <button id="reset">reset</button>
        <div class="box-style"></div>
        <div class="box-style"></div>
        <div class="box-style"></div>
        <div class="box-style"></div>
    </div>
  </body>
</html>

$(function() {
    $.fn.swipe = function(callback) {
        var touchDown = false,
            originalPosition = null,
            $el = $(this),
            eventStart = '',
            eventMove = '',
            eventEnd = '';

        var UIevent = (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/iPhone/) || navigator.userAgent.match(/iPad/)) ? 'touch' : 'other';

        if (UIevent === 'touch') {
            eventStart = 'touchstart';
            eventMove = 'touchmove';
            eventEnd = 'touchend';
            $('#device').text('touch device');
        } else {
            eventStart = 'mousedown';
            eventMove = 'mousemove';
            eventEnd = 'mouseup';
            $('#device').text('normal device');
        }


        function swipeInfo(event) {
            if (navigator.userAgent.match(/Android/i))
                event.preventDefault();
            
            var x, dx;

            if (event) {
                var touches = event.touches && event.touches.length ? event.touches : [event];
                var e = (event.changedTouches && event.changedTouches[0]) || touches[0];
                if (e) {
                    x = e.clientX || e.pageX || 0;
                }
            }

            dx = (x > originalPosition.x) ? "right" : "left";

            $('#note').text("x = " + x + ", originalPosition = " + originalPosition.x);

            return {
                direction: dx,
                offset: x - originalPosition.x
            };
        }

        $el.on(eventStart, function(event) {
            $('.choice').removeClass('choose-yes').removeClass('choose-no');
            touchDown = true;

            originalPosition = {
                x: event.originalEvent.pageX
            };
        });

        $el.on(eventEnd, function(event) {
            $('#note').text('...');
            $('.box').css('margin-left', 0);

            touchDown = false;
            originalPosition = null;
        });

        $el.on(eventMove, function(event) {
            if (!touchDown) {
                return;
            }
            var info = swipeInfo(event);
            var leftVal = $('.box').css('margin-left').replace('px', '');

            // going right
            if (leftVal > ($('.box').width() / 2)) {
                $('.choice').addClass('choose-yes').removeClass('choose-no');
                // going left
            } else if (leftVal < (-$('.box').width() / 2)) {
                $('.choice').addClass('choose-no').removeClass('choose-yes');
            } else {
                $('.choice').removeClass('choose-no').removeClass('choose-yes');
            }

            callback(info.direction, info.offset);
        });

        return true;
    };
});



$(document).ready(function() {
    $('#note').text('...');

    $(".box").swipe(function(direction, offset) {
        if (offset > ($('.box').width() / 0.25) || offset < (-$('.box').width() / 0.25)) {
            finishSlide(offset);
        } else {
            $('.box').css('margin-left', offset + 'px');
        }
    });

    $('#reset').on('click', function() {
        $('#note').text('...');
        $('.box').css('margin-left', 0);
        $('.choice').removeClass('choose-yes').removeClass('choose-no');
    });
});

/* Styles go here */
body {
    background-color: #000;
    color: #fff;
    z-index: 100;
}

.box-style {
    background-color: lightgreen;
    height: 300px;
    border: 1px solid;
    box-sizing: border-box;
    margin: 0 0 20px 0;
    width: 100%;
    z-index: 1;
}

.wines {
    height: 310px;
}

.wine {
    width: 30%;
    height: 300px;
    border: 1px solid #000;
    float: left;
    margin: 0 4.3% 10px 0;
}

.wine:last-child {
    margin-right: 0;
}

.mobile {
    height: 1280px;
    width: 480px;
    background: #fff;
    margin: 0 auto;
    overflow: scroll;
}

.yes {
    width: 50%;
    padding: 20px;
    color: #c6c6c6;
    font-size: 50px;
    line-height: 50px;
    text-align: center;
    font-family: verdana, sans-serif, arial;
    box-sizing: border-box;
    margin-left: 50%;
}

.no {
    box-sizing: border-box;
    width: 50%;
    float: left;
    padding: 20px;
    color: #c6c6c6;
    font-size: 50px;
    line-height: 50px;
    text-align: center;
    font-family: verdana, sans-serif, arial;
}

.choice {
    clear: both;
}

.choice.choose-yes .yes {
    color: green;
}

.choice.choose-no .no {
    color: red;   
}

.mobile button {
    font-family: verdana, sans-serif, arial;
    font-size: 24px;
    line-height: 30px;
    border-radius: 5px;
    border-color: green;
    color: #fff;
    background-color: green;
    margin: 0 auto 20px auto;
    display: block;
    padding: 7px 20px;
}


@media (max-width: 767px) {
    .mobile {
        max-width: 480px;
        box-sizing: border-box;
    }
}

@media (max-width: 480px) {
    .mobile {
        width: 100%;
    }
}