Skip to content
Svelte Swipe with zero dependencies 🔥 💥
HTML JavaScript
Branch: master
Clone or download
Latest commit 4881923 Jan 29, 2020
Permalink
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.md changelog update Jan 29, 2020
LICENSE license file Sep 12, 2019
README.md 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
rollup.dev.config.js changed to docs Sep 11, 2019

README.md

Svelte Swipe

NPM version NPM downloads

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

View the demo.

Installation

npm i svelte-swipe

Usage

<script>

  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

</script>

<style>
  .swipe-holder{
    height: 30vh;
    width: 100%;
  }
  img{
    max-width: 100%;
    height: auto;
  }
</style>

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

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

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

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

Pointer event inside Swipe Item

<style>
   ...

  .has-pointer-event{
    pointer-events:fill;
  }
</style>

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

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

Props

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

NPM

Scan qr code to see url in your device

demo-url

You can’t perform that action at this time.