<div id="test">
  請在這裡滑動
</div>
html, body {
  padding: 0;
  margin: 0;
  height: 100%;
}
#test {
  background: #1a6f7a;
  color: white;
  height: 100%;
  text-align: center;
  font-size: 26px;
  padding-top: 1rem;
}
$(function() {

  
    $("#test").swipe({
        threshold: 0,
        swipe:function(event, direction, distance, duration, fingerCount, fingerData, currentDirection) {
            console.log([event, direction, distance, duration, fingerCount, fingerData, currentDirection]);
          
            $(this).text("滑動方向 " + direction );  
        }
    });

    // 額外設定,例如手指頭支援的數量
    $("#test").swipe( {fingers:2} );

});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
  2. https://codepen.io/fdjkgh580/pen/JZygMK.js