SharifClick/ svelte-swipe

(v1.8.2) 21 days ago

Svelte

JavaScript

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

Sharif Ahmed SharifClick

# 349,618

JavaScr...

svelte-...

svelte3

Svelte

290 commits

Kawsar Ahmed prokawsar

# 486,997

JavaScr...

svelte-...

svelte3

Svelte

3 commits

Abdelrahman Aly Abounegm aabounegm

# 409,719

Svelte

CSS

HTML

Shell

3 commits

Byeguo betterTisen

# 513,171

JavaScr...

Front e...

Svelte

2 commits

Alexandre Plennevaux pixeline

# 352,293

CSS

WordPre...

PHP

json-we...

1 commit

Readme

Svelte Swipe

Name: svelte-swipe
Brand: svelte-swipe
SKU: //SharifClick/svelte-swipe
Rating: 2.2475 (199 reviews)

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 |

*ms | |

delay

Number

| transition delay | No |

*ms | |

defaultIndex

Number

| initial item index | No |

| |

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

About the developer

Description

Services available

Need anything else?

Contributors list

Svelte Swipe

🚀See it in Action

Installation

Usage

Supports Dynamic height (from child) 🔥

Vertical Swipe 🔥

Pointer event inside Swipe Item

Programmatically change slides

Supports custom thumbnail

🚀See example with custom thumbnail

Default css custom properties

Props

Events

NPM Statistics

Scan qr code to see url in your device