> For the complete documentation index, see [llms.txt](https://jscula.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jscula.gitbook.io/docs/events/onswipe.md).

# onSwipe()

## `$(selector).onSwipe(callback)`

Triggers callback when element is swiped in **any direction** (left/right/up/down).

#### Example

```javascript
$('#slider').onSwipe((direction) => {
    console.log("Swiped:", direction);
});
```

### Use cases

Use `onSwipe()` to:

* Navigate a gallery or carousel.
* Dismiss a card with a horizontal swipe.
* Move through touch-friendly content.

### More examples

Update a gallery based on swipe direction:

```javascript
$('#gallery').onSwipe((direction) => {
  if (direction === 'left') {
    showNextImage();
  }

  if (direction === 'right') {
    showPreviousImage();
  }
});
```

Dismiss a notification with an upward swipe:

```javascript
$('#notification').onSwipe((direction) => {
  if (direction === 'up') {
    $('#notification').hide();
  }
});
```

{% hint style="info" %}
Provide visible controls as well. Swipe gestures are not available to every user.
{% endhint %}