https://github.com/SharifClick/svelte-swipe

Svelte Swipe with zero dependencies :fire: :boom:
https://github.com/SharifClick/svelte-swipe

Last synced: 4 days ago
JSON representation

Svelte Swipe with zero dependencies :fire: :boom:

• Host: GitHub
• URL: https://github.com/SharifClick/svelte-swipe
• Owner: SharifClick
• License: mit
• Created: 2019-08-25T16:15:34.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2024-02-29T19:15:25.000Z (8 months ago)
• Last Synced: 2024-10-11T12:43:39.276Z (28 days ago)
• Language: Svelte
• Homepage: https://sharifclick.github.io/svelte-swipe/
• Size: 2.49 MB
• Stars: 390
• Watchers: 8
• Forks: 27
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-starred - SharifClick/svelte-swipe - Svelte Swipe with zero dependencies :fire: :boom: (others)

README

        


  





  

  

    

  

  

    

  


  

    

  

  

  



____

[English](README.md) / [Korean](README_KO.md) / [简体中文](README_CN.md)

Swipable items wrapper component for Svelte :fire: :boom: (zero dependencies)

## 🚀[See it in Action](https://sharifclick.github.io/svelte-swipe/)

## Installation

```bash

npm i -D svelte-swipe

```

## Usage

```html

  import { Swipe, SwipeItem } from "svelte-swipe";

  const swipeConfig = {

    autoplay: false,

    delay: 2000,

    showIndicators: true,

    transitionDuration: 1000,

    defaultIndex: 0,

  };

  .swipe-holder{

    height: 30vh;

    width: 100%;

  }

  img{

    max-width: 100%;

    height: auto;

  }



  

    

      

    


    

      

    

    

      

    

    

      

    

  



```

### Supports Dynamic height (from child) 🔥

```html

  let swipe_holder_height = 0;

  function heightChanged({detail}) {

    swipe_holder_height = detail.height;

  }



  

    {#each items as item, i}

      

        ....

      

    {/each}

  



```

### Supports Infinite swipe 🔥

```html



  

    {#each items as item, i}

      

        ....

      

    {/each}

  



```

### Vertical Swipe 🔥

```html



  

    

      ...

    

    ...

  



```


### Pointer event inside Swipe Item

```html

   ...

  .has-pointer-event{

    pointer-events:fill;

  }



  

    

      


        Say Hi

      

    

    ...

  



```

### Programmatically change slides

```html

  let SwipeComp;

  function nextSlide(){

   SwipeComp.nextItem()

  }

  function prevSlide(){

    SwipeComp.prevItem()

  }



  

    ....

    ...

  





  Prev

  Next



```


### Supports custom thumbnail

## 🚀[See example with custom thumbnail](https://svelte.dev/repl/be477862ac8b4dfea4c8e454e556ef2c?version=3.20.1)

```html

  let SwipeComp;

  function changeSlide(i){

    SwipeComp.goTo(i)

  }



  

    ....

    ...

  



```

## Default css custom properties

```css

  :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` |

| `allow_infinite_swipe` | `Boolean` | allow swipe items infinitely | 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](https://nodei.co/npm/svelte-swipe.png)](https://nodei.co/npm/svelte-swipe/)

### Scan qr code to see url in your device

![demo-url](https://github.com/SharifClick/svelte-swipe/blob/master/static/images/url-code.png)