svipe
v1.8.4
Published
An accessible svelte slider, forked from https://github.com/SharifClick/svelte-swipe
Downloads
6
Maintainers
Readme
Svelte Swipe
Swipable items wrapper component for Svelte :fire: :boom: (zero dependencies - 3.37 KB gzipped)
🚀See it in Action
Installation
npm i svelte-swipe
Usage
<script>
import { Swipe, SwipeItem } from "svelte-swipe"; // gzipped 3.37 KB
let autoplay = false;
let delay = 2000; //ms
let showIndicators = true;
let transitionDuration = 1000; //ms
let defaultIndex = 0; //start from 0
</script>
<style>
.swipe-holder{
height: 30vh;
width: 100%;
}
img{
max-width: 100%;
height: auto;
}
</style>
<div class="swipe-holder">
<Swipe {showIndicators} {autoplay} {delay} {transitionDuration} {defaultIndex}>
<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>
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>
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;
}
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
|
NPM Statistics
Download stats for this NPM package