Awesome

English / Korean / 简体中文

Swipable items wrapper component for Svelte :fire: :boom: (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

Events

NPM Statistics

Download stats for this NPM package

Scan qr code to see url in your device