Skip to content

SharifClick/svelte-swipe

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
dev
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Svelte Swipe

English / Korean / 简体中文

Swipable items wrapper component for Svelte 🔥 💥 (zero dependencies - <5KB 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;
  }

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