SharifClick / Svelte Swipe
Licence: mit
Svelte Swipe with zero dependencies 🔥 💥
Stars: ✠164
Labels
Projects that are alternatives of or similar to Svelte Swipe
Svelte Css Vars
✨ Ever wanted to have reactive css variables in svelte? What if I told you there's a way?
Stars: ✠150 (-8.54%)
Mutual labels: svelte
Vim Svelte
Vim syntax highlighting and indentation for Svelte 3 components.
Stars: ✠158 (-3.66%)
Mutual labels: svelte
Magic Microservices
Write components in any way, use them everywhere.😘
Stars: ✠145 (-11.59%)
Mutual labels: svelte
Svelte Notifications
Svelte toast notifications component that can be used in any JS application
Stars: ✠146 (-10.98%)
Mutual labels: svelte
Hn.svelte.dev
Hacker News clone built with Svelte and Sapper
Stars: ✠154 (-6.1%)
Mutual labels: svelte
Svelte Data Grid
Lightweight and powerful data grid for svelte
Stars: ✠139 (-15.24%)
Mutual labels: svelte
Cl Editor
Lightweight text editor built with svelte, typescript
Stars: ✠148 (-9.76%)
Mutual labels: svelte
Svelte Chota
Svelte UI components based on super lightweight chota CSS framework.
Stars: ✠157 (-4.27%)
Mutual labels: svelte
Notus Svelte
Notus Svelte: Free Tailwind CSS UI Kit and Admin
Stars: ✠144 (-12.2%)
Mutual labels: svelte
Palettes
A tool for creating nice, percerptually correct and colorblind-safe color palettes.
Stars: ✠155 (-5.49%)
Mutual labels: svelte
Svelte Carousel
A super lightweight, super simple Carousel for Svelte 3
Stars: ✠144 (-12.2%)
Mutual labels: svelte
Ajari Koding
📚 Kumpulan berbagai sumber daya untuk belajar koding dari hasil karya para kreator lokal yang terpercaya dan telah dikurasi oleh komunitas PHPID
Stars: ✠156 (-4.88%)
Mutual labels: svelte
Sb Admin Svelte
StartBootstrap SB Admin rebuilt using Svelte + Sveltestrap
Stars: ✠143 (-12.8%)
Mutual labels: svelte
Figmatocode
Generate responsive pages and apps on HTML, Tailwind, Flutter and SwiftUI.
Stars: ✠2,299 (+1301.83%)
Mutual labels: svelte
Svelte Table
A svelte-3 table implementation that allows sorting and filtering
Stars: ✠162 (-1.22%)
Mutual labels: svelte
Svelte Ionic App
Ionic UI showcase app - try Ionic UI and directly go to API or source code
Stars: ✠159 (-3.05%)
Mutual labels: svelte
Svelte Swipe
Swipable items wrapper component for Svelte 🔥 💥 (zero dependencies - 3.37 KB 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>
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;
}
Config 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
Scan qr code to see url in your device
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].