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

Top categories

svelte logo

Need a Svelte website built?

Hire a professional Svelte developer today.
Loading Svelte Themes