SharifClick
Swipable items wrapper component for Svelte :fire: :boom: (zero dependencies)
🚀See it in Action
Installation
npm i -D svelte-swipeUsage
<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
Scan qr code to see url in your device
