Swipe Directions

Control which directions cards can be swiped.

Horizontal (Default)

Swipe left and right:

<FlashCards swipe-direction="horizontal" :items="cards">
  <!-- ... -->
</FlashCards>

Events: @swipe-left, @swipe-right

Vertical

Swipe up and down:

<FlashCards swipe-direction="vertical" :items="cards">
  <!-- ... -->
</FlashCards>

Events: @swipe-top, @swipe-bottom

Multi-Directional

Combine specific directions:

<FlashCards :swipe-direction="['left', 'right', 'top']" :items="cards">
  <!-- ... -->
</FlashCards>

All four directions:

<FlashCards :swipeDirection="['left', 'right', 'top', 'bottom']" :items="cards">
  <!-- ... -->
</FlashCards>

Directional Slots

Add visual feedback for each direction:

<template #left="{ delta }">NOPE</template>
<template #right="{ delta }">LIKE</template>
<template #top="{ delta }">SUPER LIKE</template>

The delta value (-1 to 1) indicates drag progress for animations.

See: Examples - Basic