# wc-horizontal-scroller

> Web component for a horizontal scroller

Latest version **0.7.1** (published 2025-02-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install wc-horizontal-scroller
pnpm add wc-horizontal-scroller
yarn add wc-horizontal-scroller
bun add wc-horizontal-scroller
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.7.1 |
| Published | 2025-02-05 |
| First published | 2023-04-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 33.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Luke Warlow |
| Maintainers | lukewarlow |
| Keywords | web, component, front-end, web-components, web-component, webcomponents, webcomponent, web components, web component, carousel, scroller, horizontal-scroller, horizontal scroller, TypeScript |

## Links

- npm: https://www.npmjs.com/package/wc-horizontal-scroller
- Repository: https://github.com/lukewarlow/wc-horizontal-scroller
- Homepage: https://github.com/lukewarlow/wc-horizontal-scroller#readme
- Issues: https://github.com/lukewarlow/wc-horizontal-scroller/issues
- npm.io page: https://npm.io/package/wc-horizontal-scroller

## Dependencies (1)

- [invokers-polyfill](https://npm.io/package/invokers-polyfill.md) ^0.4.6

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 0.7.1 (latest) — 2025-02-05
- 0.7.0 — 2025-02-05
- 0.6.0 — 2024-02-16
- 0.5.0 — 2024-01-13
- 0.4.0 — 2023-11-29
- 0.3.3 — 2023-08-12
- 0.3.2 — 2023-08-12
- 0.3.1 — 2023-08-10
- 0.3.0 — 2023-08-10
- 0.2.1 — 2023-07-05
- 0.2.0 — 2023-07-05
- 0.1.4 — 2023-04-21
- 0.1.3 — 2023-04-18
- 0.1.2 — 2023-04-14
- 0.1.1 — 2023-04-14
- … 2 more at https://npm.io/package/wc-horizontal-scroller/versions

## README

# Horizontal Scroller Web Component

[![npm](https://img.shields.io/npm/v/wc-horizontal-scroller.svg?style=flat-square)](https://www.npmjs.com/package/wc-horizontal-scroller)

A web component for a horizontal scroller (carousel)

### Install

```shell
$ npm i wc-horizontal-scroller
```
### Usage

Firstly, you need to register the custom element.

```js
import HorizontalScroller from "wc-horizontal-scroller";

window.customElements.define('horizontal-scroller', HorizontalScroller);
```

Then you can use it in your HTML. You must provide an ID for the element.

```html
<horizontal-scroller id="foo">
    <div>Item 1</div>
    <div>Item 2</div>
</horizontal-scroller>
```

#### Fullscreen

By default, clicking on the element will expand it to cover most of the viewport. This can be disabled by adding the `no-fullscreen` attribute to the custom element.

## License

This project is licensed under the [MIT License](https://github.com/lukewarlow/wc-horizontal-scroller/blob/master/LICENSE).

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