A minimal swiper for Svelte
- Intuitive matrix layout
- One component, few-to-no props
- No 🔔 or 🎉; just swipe (mobile) or use arrow keys / mouse wheel
npm i svelte-swiper-matrix
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 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 cells
- If your browser shows an
outline
around Swiper whenfocus:visible
is triggered, remove it like this:#swiper:focus-visible { outline: none; }
Prop Name | Type | Default Value | Description |
---|---|---|---|
dim |
string |
"${children.length}x1" |
Swiper row x col dimensions |
omit |
number[] |
[] |
Swiper cells to omit |
noArrows |
boolean |
false |
Boolean for hiding arrows |
arrowProps |
Record<string, any> |
{} |
SwiperArrows.$$restProps |
Technically, all props are optional
Car images source: https://www.wsupercars.com/