Need help with svelte-swipe?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

SharifClick
199 Stars 21 Forks MIT License 327 Commits 8 Opened issues

Description

Svelte Swipe with zero dependencies :fire: :boom:

Services available

!
?

Need anything else?

Contributors list

# 349,618
JavaScr...
svelte-...
svelte3
Svelte
290 commits
# 486,997
JavaScr...
svelte-...
svelte3
Svelte
3 commits
# 409,719
Svelte
CSS
HTML
Shell
3 commits
# 513,171
JavaScr...
Front e...
Svelte
2 commits
# 352,293
CSS
WordPre...
PHP
json-we...
1 commit

Svelte Swipe

English / Korean / 简体中文

Swipable items wrapper component for Svelte :fire: :boom: (zero dependencies - <5KB gzipped)

🚀See it in Action

Installation

npm i -D svelte-swipe

Usage

<swipeitem>
  <img src="https://github.com/SharifClick/svelte-swipe/raw/master/./images/2.jpg" alt="">
</swipeitem>

<swipeitem>
  <img src="https://github.com/SharifClick/svelte-swipe/raw/master/./images/3.jpg" alt="">
</swipeitem>

<swipeitem>
  <img src="https://github.com/SharifClick/svelte-swipe/raw/master/./images/4.jpg" alt="">
</swipeitem>

Supports Dynamic height (from child) 🔥

{#each items as item, i} .... {/each}

Vertical Swipe 🔥

... ...

Pointer event inside Swipe Item

Say Hi
...

Programmatically change slides

.... ...
Prev Next

Supports custom thumbnail

🚀See example with custom thumbnail

.... ...

Default css custom properties

  :root{
    --sv-swipe-panel-height: inherit;
    --sv-swipe-panel-width: inherit;
    --sv-swipe-panel-wrapper-index: 2;
    --sv-swipe-indicator-active-color: grey;
    --sv-swipe-handler-top: 0px;
  }

Props

| Name | Type | Description | Required | Default | | --- | --- | --- | --- | --- | |

is_vertical
|
Boolean
| allow swipe items vertically | No |
false
| |
autoplay
|
Boolean
| Play items as slide | No |
false
| |
showIndicators
|
Boolean
| appears clickable circle indicators bottom center of item | No |
false
| |
transitionDuration
|
Number
| staying duration of per slide/swipe item | No |
200
*ms | |
delay
|
Number
| transition delay | No |
1000
*ms | |
defaultIndex
|
Number
| initial item index | No |
0
| |
allow_dynamic_height
|
Boolean
| allow firing height change event
on:swipe_item_height_change
| No |
false
| |
active
|
Boolean
| fire height change event | No |
false
|

Events

| Name | Description | Component | | --- | --- | --- | |

on:change
| fires on swipe-end with with holding detail
active_item
,
swipe_direction
and
active_element
|
Swipe
| |
on:swipe_item_height_change
| fires on swipe-end with holding child's current height detail |
SwipeItem
|

NPM Statistics

Download stats for this NPM package

NPM

Scan qr code to see url in your device

demo-url

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.