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 matrix 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 matrix cells

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

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

Props

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