Skip to content
Svelte Swipe with zero dependencies 🔥 💥
HTML JavaScript
Branch: master
Clone or download
Latest commit 4881923 Jan 29, 2020
Type Name Latest commit message Commit time
Failed to load latest commit information.
dev doc update Jan 29, 2020
docs doc bundle Jan 29, 2020
src set defaultIndexas default value on played Jan 29, 2020
.gitignore updated gitignore Sep 6, 2019
.npmignore changelog update Jan 29, 2020
LICENSE license file Sep 12, 2019 readme update Jan 29, 2020
package-lock.json updated version and bundles Oct 21, 2019
package.json version bump Jan 29, 2020
rollup.config.js bundle size dev dep Sep 8, 2019 changed to docs Sep 11, 2019

Svelte Swipe

NPM version NPM downloads

Swipable items wrapper component for Svelte 🔥 💥 (zero dependencies - 3.37 KB gzipped)

View the demo.


npm i svelte-swipe



  import { Swipe, SwipeItem } from "svelte-swipe"; // gzipped 3.37 KB

  let autoplay = false;
  let delay = 2000; //ms
  let showIndicators = true;
  let transitionDuration = 1000; //ms
  let defaultIndex = 0; //start from 0


    height: 30vh;
    width: 100%;
    max-width: 100%;
    height: auto;

<div class="swipe-holder">
  <Swipe {showIndicators} {autoplay} {delay} {transitionDuration} {defaultIndex}>
      <img src="./images/1.jpg" alt="">

      <img src="./images/2.jpg" alt="">

      <img src="./images/3.jpg" alt="">

      <img src="./images/4.jpg" alt="">

Pointer event inside Swipe Item



<div class="swipe-holder">
        <button class="has-pointer-event" on:click={sayHi}>Say Hi</button>

Default css custom properties

    --sv-swipe-panel-height: inherit;
    --sv-swipe-panel-width: inherit;
    --sv-swipe-panel-wrapper-index: 2;
    --sv-swipe-indicator-active-color: grey;


Name Type Description Required Default
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


Scan qr code to see url in your device


You can’t perform that action at this time.