Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/flo-bit/svelte-swiper-cards
tinder like swipeable cards component for svelte
https://github.com/flo-bit/svelte-swiper-cards
javascript svelte sveltekit swipeable tinder-ui typescript
Last synced: 7 days ago
JSON representation
tinder like swipeable cards component for svelte
- Host: GitHub
- URL: https://github.com/flo-bit/svelte-swiper-cards
- Owner: flo-bit
- License: mit
- Created: 2024-02-14T18:43:26.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-06-23T20:40:36.000Z (5 months ago)
- Last Synced: 2024-06-23T21:41:29.715Z (5 months ago)
- Topics: javascript, svelte, sveltekit, swipeable, tinder-ui, typescript
- Language: Svelte
- Homepage: https://flo-bit.github.io/svelte-swiper-cards/
- Size: 26.8 MB
- Stars: 18
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# svelte-swiper-cards
Tinder-like swipeable cards component for svelte.
[Try the demo here!](https://flo-bit.github.io/svelte-swiper-cards)
https://github.com/flo-bit/svelte-swiper-cards/assets/45694132/61077605-b6f8-4114-aaa3-5527d8887f99
## Features
- Built with **tailwind**
- **Reuses cards** (only two cards, that are swapped)
- **Customizable** (easily customize the card ui and data)
- **Modern**: uses @use-gesture/vanilla for gesture handling
- Uses **TypeScript**
## Installation
- You need to have tailwind installed in your project, see [here for installation instructions](https://tailwindcss.com/docs/guides/sveltekit).
- Download the [`CardSwiper`](https://download-directory.github.io/?url=https%3A%2F%2Fgithub.com%2Fflo-bit%2Fsvelte-swiper-cards%2Ftree%2Fmain%2Fsrc%2Flib%2FCardSwiper) folder from `src/libs` to your projects `src/lib` folder.
- Install dependency `@use-gesture/vanilla`
```bash
npm i @use-gesture/vanilla
```
## Usage
```svelte
import { CardSwiper } from '$lib/CardSwiper';
// function that returns the data for each card, by default has title, description and image
let data = (index) => {
return {
title: 'Card ' + index,
description: 'Description ' + index,
image: '/profiles/' + index + '.webp'
};
};
```
### Customize
Customize the `Card.svelte` file to your needs, if you need to pass in more data to your card, edit the `CardData` type in `CardSwiper/index.ts` (and add the prop to `Card.svelte`).
### Programmatic control
You can control the cards programmatically by calling the swipe function.
```svelte
import { CardSwiper } from '$lib/CardSwiper';
let swipe: (direction?: 'left' | 'right') => void;
swipe('left')}>Swipe left
swipe('right')}>Swipe right
```
### Events
```svelte
import { CardSwiper } from '$lib/CardSwiper';
function onSwipe(cardInfo: {
direction: Direction;
element: HTMLElement;
data: CardData;
index: number;
}) {
console.log('swiped', cardInfo.direction, 'on card', cardInfo.data.title);
}
```
### Other props
#### thresholdPassed
Show a threshold overlay when swiping like so (set to 0 if no threshold reached, 1 if right threshold, -1 if left threshold is reached):
```svelte
import { CardSwiper } from '$lib/CardSwiper';
let thresholdPassed = 0;
{#if thresholdPassed !== 0}
{thresholdPassed > 0 ? '👍' : '👎'}
{/if}
```
#### minSwipeDistance, minSwipeVelocity
You can also set the minimum threshold as a percentage of the card width (default is 0.5) and the minimum speed (default is 0.5).
```svelte
```
#### arrowKeys
Per default Cards can be swiped with Arrow keys, too. You can disable this by setting `arrowKeys` to `false`.
#### anchor
if you want the user to just be able to move the card left or right in a curve, set the anchor to a high number (at least 1000, recommended >5000).
## License
MIT