loading... Pacem JS

The <pacem-swipe> behavioral element is meant to add touch swiping gesture capabilities to a PacemElement (it can be extended to mouse gestures).
Very convenient for carousel, slideshow and gallery components, in Pacem JS the swipe behavior is even exploited in tab controls navigation.

Basic behavior

In its basic fashion, swipe gesture - when triggered - translates an element outside the viewport (screen). Once the translation animation is finished, the element gets re-rendered in its original place.

Swipe gesture gets detected only if a "decent" amount of speed is registered below your finger while releasing.

A panning gesture gets visually handled. But if the finger is still when the gesture ends, then a backwards animation might restore the object's original place.


Event chain

Basic behavior in itself is almost useless, unless you - the developer - inject some logic into strategic key-points.
Here's the sequence of events triggered by the swiping gesture:

If an event gets canceled, by calling preventDefault(), the event chain gets interrupted.

If, for instance, a swipeanimationend gets canceled, then the element won't return in its original position.