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
158 Stars 16 Forks MIT License 277 Commits 5 Opened issues

Description

Svelte Swipe with zero dependencies :fire: :boom:

Services available

!
?

Need anything else?

Contributors list

# 362,398
JavaScr...
svelte-...
svelte3
Svelte
254 commits
# 484,645
JavaScr...
svelte-...
svelte3
Svelte
3 commits
# 566,725
Svelte
CSS
HTML
Shell
3 commits
# 341,975
CSS
WordPre...
PHP
json-we...
1 commit

Svelte Swipe

English / Korean

Swipable items wrapper component for Svelte :fire: :boom: (zero dependencies - 3.37 KB 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>

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;
  }

Config 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
|

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.