Svelte Swipe

English / Korean / 简体中文

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

🚀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>

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

Config 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	No	false
active	Boolean	fire height change event	No	false

NPM Statistics

Download stats for this NPM package

Scan qr code to see url in your device