https://github.com/lukewarlow/wc-horizontal-scroller
A web component for a horizontal scroller (carousel)
https://github.com/lukewarlow/wc-horizontal-scroller
carousel carousel-component component scroller webcomponent webcomponents
Last synced: 4 months ago
JSON representation
A web component for a horizontal scroller (carousel)
- Host: GitHub
- URL: https://github.com/lukewarlow/wc-horizontal-scroller
- Owner: lukewarlow
- License: mit
- Created: 2023-04-13T02:10:31.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2025-02-05T23:46:42.000Z (over 1 year ago)
- Last Synced: 2025-08-09T18:55:37.171Z (10 months ago)
- Topics: carousel, carousel-component, component, scroller, webcomponent, webcomponents
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/wc-horizontal-scroller
- Size: 407 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Horizontal Scroller Web Component
[](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
Item 1
Item 2
```
#### 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).