skim-swiper

contents

• Usage
• Properties
• Events
• Dependencies

The swiper component alows for swiping. The contents for this component can be anything, carousel and/or video, etc. Put this in a Stack component and you can create a Tinder-like swiping deck.

Swiper with carousel containing video:

<skim-swiper>
  <ion-slides style="width: 100%">
    <ion-slide>
      <video preload="auto" muted playsinline width="100%" height="auto" >
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"></source>
      </video>    
    </ion-slide>
    <ion-slide><img src="https://cdn.webshopapp.com/shops/131858/files/309737905/256x256x2/coca-cola-regular-330ml-blik.jpg"></img></ion-slide>
    <ion-slide><img src="https://cdn.webshopapp.com/shops/131858/files/309737905/256x256x2/coca-cola-regular-330ml-blik.jpg"></img></ion-slide>
  </ion-slides>
</skim-swiper>

Swiper containing just an image:

<skim-swiper>
  <img src="https://cdn.webshopapp.com/shops/131858/files/309737905/256x256x2/coca-cola-regular-330ml-blik.jpg"></img>
</skim-swiper>

Catching swiping events:

<script>
	document.querySelector('skim-swiper').addEventListener('swipe', ({ detail: swipe }) => {
		// swipe returns true for right and false for left swipe
		console.log(swipe);
	});
</script>

Prevent swiping to right:

<script>
  const swiper = document.querySelector('skim-swiper');
  swiper.addEventListener('swipeProgress', ({ detail: progress }) => {
    if (progress > 0) swiper.move();  // reset to original position
  });

</script>

Properties

Property	Attribute	Description	Type	Default
disabled	disabled	Disable swiping	boolean	false
speed	speed	Default swiping speed	number	.7
threshold	threshold	Swipe threshold value between 0 and 1	number	.8

Events

Event	Description	Type
swipe	Event will fire on swipe, as an argument it receives true for right and false for left	CustomEvent<boolean>
swipeProgress	Event will fire when progress is changed, as an argument it receives progress that is always from -1 (left) to 1 (right)	CustomEvent<number>

Methods

move(deltaX?: number, deltaY?: number, transition?: number) => Promise<void>

Move the element to specified x and y position will rotate accordingly

Returns

Type: Promise<void>

---

Built with StencilJS