svelte-swiper-matrix

svelte-swiper-matrix

A minimal swiper for Svelte

Contents

• Features
• Install
• Usage
• Examples
• License

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 cell
• In general, Swiper children should be fully sized containers

dim prop can actually be omitted for one-column matrices like 2x1, 3x1, etc.

Make sure the number of Swiper children == the number of available cells

• If your browser shows an outline around Swiper when focus:visible is triggered, remove it like this:

  #swiper:focus-visible {
    outline: none;
  }

Props

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

Examples

• 3x1

  <Swiper dim="3x1">
    ...
  </Swiper>

  

• 2x2

  <Swiper dim="2x2" omit={[3]}>
    ...
  </Swiper>

  

Car images source: https://www.wsupercars.com/

License

MIT