All samples are using Ink.requireModules, please read how to use it at Ink.requireModules section

Ink.UI.Swipe class

Subscribe swipe gestures.

Supports filtering swipes be any combination of the criteria supported in the options.

Arguments received by the callbacks

The onStart, onMove, and onEnd options receive as argument an object containing:

  • event: the DOMEvent object
  • element: the target element
  • Instance: the Ink.UI.Swipe_1 instance
  • position: Array with [x, y] coordinates of current position
  • dt: Time passed between now and the first event (onMove only)
  • gesture: an Array containing [x,y] coordinates of every touchmove event received (only if options.storeGesture is enabled) (onEnd only)
  • time: an Array containing all the dt values for every touchmove event (onEnd only)
  • overallMovement: X and Y distance traveled by the touch movement ([x, y]) (onEnd only)
  • overallTime: total time passed (onEnd only)
Method name Description
new Swipe(el, options) Constructor

new Ink.UI.Swipe(el, options)


  • el

    Element or Selector
  • options

    Options Object
  • options.onEnd

    Callback function for the `touchend` event. Gets all the gesture information, and is filtered by min/max Dist and Duration options (see below)
  • options.onStart

    Callback function for `touchstart` event.
  • options.onMove

    Callback function for every `touchmove` event. Gets current gesture information.
  • options.minDist

    Minimum allowed distance, in pixels.
  • options.maxDist

    Maximum allowed distance, in pixels.
  • options.minDuration

    Minimum allowed duration, in seconds.
  • options.maxDuration

    Maximum allowed duration, in seconds.
  • options.axis

    If either 'x' or 'y' is passed, only swipes where the dominant axis is the given one trigger the callback
  • options.storeGesture

    If to store gesture information and provide it to the callback. Defaults to true.
  • options.stopEvents

    Flag to stop (default and propagation) of the received events. Defaults to true.

Basic usage


Swipe vertically:

Swipe horizontally:



        display: block;
        width: 320px;
        height: 320px;
        background-color: #eeebe5;
<p>Swipe vertically:</p>
<div class="swipe swipe-vertical"></div>

<p>Swipe horizontally:</p>
<div class="swipe swipe-horizontal"></div>

<div class="swipe swipe-drag"></div>

    Ink.requireModules(['Ink.UI.Swipe_1', 'Ink.Dom.Element_1'], function (Swipe, InkElement) {
        new Swipe('.swipe-vertical', {
            axis: 'y',
            minDist: 20,
            onEnd: function (o) {
                InkElement.setTextContent(o.element, 'Swiped vertically!');
                    Ink.bindMethod(InkElement, 'setTextContent', o.element, ''), 500);
        new Swipe('.swipe-horizontal', {
            axis: 'x',
            minDist: 50,
            onEnd: function (o) {
                InkElement.setTextContent(o.element, 'Swiped horizontally!');
                    Ink.bindMethod(InkElement, 'setTextContent', o.element, ''), 500);

        new Swipe('.swipe-drag', {
            onStart: function (o) {
       = 'absolute'
            onMove: function (o) {
                var style =
                style.left = o.position[0] + 'px'
       = o.position[1] + 'px'
            onEnd: function (o) {
       = 'static'