Init HTML

Bạn thử vuốt trong khung này nhé.

Sự kiện vuốt

Để xử lí sự kiện vuốt, bạn dùng jQuery và touchSwipe.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.19/jquery.touchSwipe.min.js" integrity="sha512-YYiD5ZhmJ0GCdJvx6Xe6HzHqHvMpJEPomXwPbsgcpMFPW+mQEeVBU6l9n+2Y+naq+CLbujk91vHyN18q6/RSYw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Cách sử dụng như sau.

jQuery(document).ready(function($) {
	$('.touch-area').swipe({
        tap: function(event, target) {
            $('.touch-area').html('Sự kiện: Nhấp (Tap)');
        },
        swipe: function(event, direction, distance, duration, fingerCount, fingerData) {
            if (direction == 'left') $('.touch-area').html('Sự kiện: Vuốt qua trái');
            if (direction == 'right') $('.touch-area').html('Sự kiện: Vuốt qua phải');
        },
        allowPageScroll: 'vertical' // Chỉ chấp nhận sự kiện vuốt ngang
    });
});

Chúc các bạn thành công!