# @phase2/outline-image-slider

> The Outline Components for the image slider component

Latest version **0.1.6** (published 2023-08-23) · BSD-3-Clause license · 0 weekly downloads

## Install

```sh
npm install @phase2/outline-image-slider
pnpm add @phase2/outline-image-slider
yarn add @phase2/outline-image-slider
bun add @phase2/outline-image-slider
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.1.6 |
| Published | 2023-08-23 |
| First published | 2022-08-26 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 454.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 131 |
| Author | Phase2 Technology |
| Maintainers | nadavoid, grshane, dmuzyka, mkochendorfer, pschuelke, yuginaili, cclarkdev, febbraro, himerus, shaal |
| Keywords | outline, web-components, design system, image slider |

## Links

- npm: https://www.npmjs.com/package/@phase2/outline-image-slider
- Repository: https://github.com/phase2/outline
- Homepage: https://github.com/phase2/outline/tree/next/packages/components/@deprecated/outline-image-slider
- Issues: https://github.com/phase2/outline/issues
- npm.io page: https://npm.io/package/@phase2/outline-image-slider

## Dependencies (4)

- [lit](https://npm.io/package/lit.md) ^2.3.1
- [tslib](https://npm.io/package/tslib.md) ^2.1.0
- [@splidejs/splide](https://npm.io/package/@splidejs/splide.md) ^4.0.7
- [@phase2/outline-core](https://npm.io/package/@phase2/outline-core.md) ^0.2.5

## 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.1.6 (latest) — 2023-08-23
- 0.1.5 — 2023-08-08
- 0.1.4 — 2023-08-04
- 0.1.3 — 2023-03-23
- 0.1.2 — 2023-03-08
- 0.1.1 — 2023-03-07
- 0.1.0 — 2022-10-27
- 0.0.3 — 2022-10-25
- 0.0.2 — 2022-10-10
- 0.0.1 — 2022-08-26

## README

# outline-image-slider

The Image Slider component

## Properties

| Property            | Type                                 | Default                                          |
|---------------------|--------------------------------------|--------------------------------------------------|
| `imageListTemplate` | `() => TemplateResult<ResultType>[]` | "(): TemplateResult[] => {\n    let counter = 0;\n    const templateArr: TemplateResult[] = [];\n\n    while (counter < this.childElementCount) {\n      templateArr.push(\n        html` <div\n          class=\"splide__slide\"\n          role=\"group\"\n          aria-label=\"slide ${counter + 1} of ${this.childElementCount}\"\n        >\n          <slot name=\"image-${counter + 1}\"></slot>\n          <div aria-hidden=\"true\" class=\"slide-count\">\n            <span>${counter + 1} / ${this.childElementCount}</span>\n          </div>\n        </div>`\n      );\n\n      counter++;\n    }\n\n    return templateArr;\n  }" |
| `nextBtn`           | `HTMLElement`                        |                                                  |
| `observer`          | `MutationObserver`                   |                                                  |
| `prevBtn`           | `HTMLElement`                        |                                                  |
| `setSlots`          | `() => void`                         | "() => {\n    let counter = 0;\n    while (counter <= this.childElementCount) {\n      if (this.children[counter]) {\n        this.children[counter].setAttribute('slot', `image-${counter + 1}`);\n      }\n      counter++;\n    }\n    this.requestUpdate();\n  }" |
| `splide`            | `Splide`                             |                                                  |
| `splideEl`          | `HTMLElement`                        |                                                  |

## Slots

| Name             | Description                                      |
|------------------|--------------------------------------------------|
| `image-<number>` | slots are generated in code, component accepts stack of desired elements to display |

---
_Source: https://npm.io/package/@phase2/outline-image-slider · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._