# svelte-swiper-matrix

> A minimal swiper for Svelte

Latest version **0.6.0** (published 2024-08-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install svelte-swiper-matrix
pnpm add svelte-swiper-matrix
yarn add svelte-swiper-matrix
bun add svelte-swiper-matrix
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.6.0 |
| Published | 2024-08-10 |
| First published | 2024-03-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 2 |
| Unpacked size | 17.8 KB |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Henry Aguila |
| Maintainers | henryaguila |
| Keywords | swiper, slider |

## Links

- npm: https://www.npmjs.com/package/svelte-swiper-matrix
- Repository: https://github.com/hankaguila/svelte-swiper-matrix
- Homepage: https://github.com/hankaguila/svelte-swiper-matrix#readme
- Issues: https://github.com/hankaguila/svelte-swiper-matrix/issues
- npm.io page: https://npm.io/package/svelte-swiper-matrix

## Dependencies (2)

- [svelte](https://npm.io/package/svelte.md) ^4.0.0
- [material-symbols](https://npm.io/package/material-symbols.md) ^0.17.1

## Alternatives

- [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads
- [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads
- [better](https://npm.io/package/better.md) — 42 weekly downloads
- [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads
- [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads

## Recent versions

- 0.6.0 (latest) — 2024-08-10
- 0.5.0 — 2024-08-09
- 0.4.2 — 2024-06-07
- 0.4.1 — 2024-03-31
- 0.4.0 — 2024-03-30
- 0.2.0 — 2024-03-27
- 0.1.0 — 2024-03-27

## README

# svelte-swiper-matrix

[![npm-version](https://img.shields.io/npm/v/svelte-swiper-matrix.svg)](https://www.npmjs.com/package/svelte-swiper-matrix)
[![npm-downloads](https://img.shields.io/npm/dm/svelte-swiper-matrix.svg)](https://npmcharts.com/compare/svelte-swiper-matrix?minimal=true)

A minimal swiper for Svelte

## Contents

- [Features](#features)
- [Install](#install)
- [Usage](#usage)
- [Examples](#examples)
- [License](#license)

## Features

- Intuitive matrix layout
- One component, few-to-no props
- No 🔔 or 🎉; just swipe (mobile) or use arrow keys / mouse wheel

## Install

```sh
npm i svelte-swiper-matrix
```

## Usage

To properly display swiper arrows, add the following to `*.css`:

```css
@import "material-symbols";
```

Or `*.svelte`;

```svelte
<script>
  import "material-symbols";
</script>
```

Then, simply do something like this:

```svelte
<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:
  ```css
  #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](src/widgets/ExampleA.svelte)

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

  ![3x1](/docs/3x1.png)
  ![3x1](/docs/3x1.gif)

- [2x2](src/widgets/ExampleB.svelte)

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

  ![2x2](/docs/2x2.png)
  ![2x2](/docs/2x2.gif)

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

## License

[MIT](LICENSE)

---
_Source: https://npm.io/package/svelte-swiper-matrix · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._