https://github.com/razshare/svelte-liquid-swipe

https://github.com/razshare/svelte-liquid-swipe

animation css liquid svelte sveltejs swipe

Last synced: about 19 hours ago
JSON representation

• Host: GitHub
• URL: https://github.com/razshare/svelte-liquid-swipe
• Owner: razshare
• Created: 2020-11-15T08:37:05.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2024-06-10T17:20:38.000Z (4 months ago)
• Last Synced: 2024-06-12T18:27:12.527Z (3 months ago)
• Topics: animation, css, liquid, svelte, sveltejs, swipe
• Language: Svelte
• Homepage: https://razshare.github.io/svelte-liquid-swipe/
• Size: 7.17 MB
• Stars: 63
• Watchers: 4
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Usage

Install with

```sh

npm i -D svelte-liquid-swipe

```

Import your `LiquidContainer` component

```html

  import { LiquidContainer } from 'svelte-liquid-swipe'

```

The `LiquidContainer` component exposes a root element of `position:absolute`, meaning you'll have to wrap it inside your own `relative`, `fixed`, etc element in order to manage its size and position.

Something like this

```html

  import { LiquidContainer } from 'svelte-liquid-swipe'



  



```


Then add some components to your container

```html

  import { LiquidContainer } from 'svelte-liquid-swipe'

  import Page1 from 'page1.svelte'

  import Page2 from 'page2.svelte'

  import Page3 from 'page3.svelte'

  import Page4 from 'page4.svelte'

  const pages = [Page1, Page2, Page3, Page4]



  



```


Result



Make sure you set `overflow:hidden` on your wrapper for the best results.

# Notes

Looking for full project example? Checkout the [example branch](https://github.com/tncrazvan/svelte-liquid-swipe/tree/example).