0.4.1 • Published 2 months ago
svelte-swiper-matrix v0.4.1
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/