A minimal swiper for Svelte
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>
Swiper
child is positioned in the next available cellSwiper
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
outline
around Swiper when focus: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/