svelte-liquid-swipe - GitLite

KO | EN

gitlite — search

#python #react #typescript #go #golang #machine-learning #rust #deep-learning #macos #awesome #kubernetes #pytorch #ios #open-source

svelte-liquid-swipe

(★ 65)

No description available.

File Explorer

Download Latest Version (.zip)

- - index.js
- - +page.svelte
- app.d.ts
- app.html
- favicon.png
.eslintignore
.eslintrc.cjs
.gitignore
.npmrc
.prettierignore
.prettierrc
bun.lockb
package-lock.json
package.json
pnpm-lock.yaml
README.md
svelte.config.js
tsconfig.json
vite.config.ts

# Installation Guide

1. Get the code

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

Downloads the entire project code from GitHub to your computer.

cd svelte-liquid-swipe

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm i -D svelte-liquid-swipe

Type this command into your terminal and run it.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Usage

Install with

```sh
npm i -D svelte-liquid-swipe
```

Import your `LiquidContainer` component

```html
<script>
  import { LiquidContainer } from 'svelte-liquid-swipe'
</script>

<LiquidContainer />
```

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
<script>
  import { LiquidContainer } from 'svelte-liquid-swipe'
</script>

<div style="position:relative;width:600px;height:800px;overflow:hidden">
  <LiquidContainer />
</div>
```

Then add some components to your container

```html
<script>
  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]
</script>

<div style="position:relative;width:600px;height:800px;overflow:hidden">
  <LiquidContainer direction="right" components="{pages}" />
</div>
```

Result

<img src="https://razshare.dev/svelte-liquid-swipe/preview.gif" />

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).