svelte-swipe
TypeScript icon, indicating that this package has built-in type declarations

2.0.4 • Public • Published
Svelte Swipe

English / Korean / 简体中文

Swipable items wrapper component for Svelte 🔥 💥 (zero dependencies)

🚀See it in Action

Installation

npm i -D svelte-swipe

Usage

<script>

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

  const swipeConfig = {
    autoplay: false,
    delay: 2000,
    showIndicators: true,
    transitionDuration: 1000,
    defaultIndex: 0,
  };
</script>

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

<div class="swipe-holder">
  <Swipe {...swipeConfig}>
    <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>

Supports Dynamic height (from child) 🔥

<script>
  let swipe_holder_height = 0;

  function heightChanged({detail}) {
    swipe_holder_height = detail.height;
  }

</script>

<div class="swipe-holder" style="height:{swipe_holder_height}px">
  <Swipe bind:active_item>
    {#each items as item, i}
      <SwipeItem
        active={active_item == i}
        allow_dynamic_height={true}
        on:swipe_item_height_change={heightChanged}>
        ....
      </SwipeItem>
    {/each}
  </Swipe>
</div>

Supports Infinite swipe 🔥

<div class="swipe-holder" style="height:{swipe_holder_height}px">
  <Swipe bind:active_item>
    {#each items as item, i}
      <SwipeItem
        active={active_item == i}
        allow_infinite_swipe={true}>
        ....
      </SwipeItem>
    {/each}
  </Swipe>
</div>

Vertical Swipe 🔥

<div class="swipe-holder">
  <Swipe is_vertical={true}>
    <SwipeItem>
      ...
    </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>

Programmatically change slides

<script>
  let SwipeComp;

  function nextSlide(){
   SwipeComp.nextItem()
  }

  function prevSlide(){
    SwipeComp.prevItem()
  }

</script>
<div class="swipe-holder">
  <Swipe bind:this={SwipeComp}>
    <SwipeItem>....</SwipeItem>
    ...
  </Swipe>
</div>
<div class="buttons-holder">
  <button type="button" on:click={prevSlide}>Prev</button>
  <button type="button" on:click={nextSlide}>Next</button>
</div>

Supports custom thumbnail

🚀See example with custom thumbnail

<script>
  let SwipeComp;

  function changeSlide(i){
    SwipeComp.goTo(i)
  }

</script>
<div class="swipe-holder">
  <Swipe bind:this={SwipeComp}>
    <SwipeItem>....</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;
    --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

Scan qr code to see url in your device

demo-url

Package Sidebar

Install

npm i svelte-swipe

Weekly Downloads

490

Version

2.0.4

License

MIT

Unpacked Size

31.8 kB

Total Files

11

Last publish

Collaborators

  • me.sharifahmed..gmail.com