{"repo":"flo-bit/svelte-swiper-cards","free":true,"listed":false,"github":"https://github.com/flo-bit/svelte-swiper-cards","clone":"git clone https://github.com/flo-bit/svelte-swiper-cards.git","description":"tinder like swipeable cards component for svelte","language":"Svelte","stars":56,"topics":["javascript","svelte","sveltekit","swipeable","tinder-ui","typescript"],"license":"MIT","category":"saas-starters-boilerplates","readme_excerpt":"svelte-swiper-cards Tinder-like swipeable cards component for svelte. Try the demo here! 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. - Download the CardSwiper folder from src/libs to your projects src/lib folder. - Install dependency @use-gesture/vanilla Usage 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. Events 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): 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). 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 ","default_branch":null,"files":null,"tree":[],"storefront":"/r/flo-bit","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/flo-bit/svelte-swiper-cards/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}