svelte-swiper-matrix
v0.4.1
Published
A minimal swiper for Svelte
Downloads
25
Readme
svelte-swiper-matrix
A minimal swiper for Svelte
Contents
Features
- Intuitive matrix layout
- One component, few-to-no props
- No 🔔 or 🎉; just swipe (mobile) or use arrow keys / mouse wheel
Install
npm i svelte-swiper-matrix
Usage
To properly display swiper arrows, add the following to *.css
:
@import "material-symbols";
Or *.svelte
;
<script>
import "material-symbols";
</script>
Then, simply do something like this:
<script>
import { Swiper } from "svelte-swiper-matrix";
</script>
<Swiper dim="2x1">
<div class="full-size">...</div>
<div class="full-size">...</div>
</Swiper>
<style>
.full-size {
width: 100%;
height: 100%;
}
</style>
- Each
Swiper
child is positioned in the next available matrix cell - In general,
Swiper
children should be fully sized containers
✅
dim
prop can actually be omitted for one-column matrices like2x1
,3x1
, etc.
⚠️ Make sure the number of Swiper children
==
the number of available matrix cells
Props
| Prop Name | Type | Default Value | Description |
| ------------ | --------------------- | ------------------------ | ----------------------------- |
| dim
| string
| "${children.length}x1"
| Matrix row x col
dimensions |
| omit
| number[]
| []
| Matrix cells to omit |
| noArrows
| boolean
| false
| Boolean for hiding arrows |
| arrowProps
| Record<string, any>
| {}
| SwiperArrows.$$restProps
|
Technically, all props are optional
Examples
Car images source: https://www.wsupercars.com/