wc-horizontal-scroller
TypeScript icon, indicating that this package has built-in type declarations

0.6.0 • Public • Published

Horizontal Scroller Web Component

npm

A web component for a horizontal scroller (carousel)

Install

$ npm i wc-horizontal-scroller

Usage

Firstly, you need to register the custom element.

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.

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

A scrollerfullscreenenter event will be dispatched by the element when entering fullscreen, and scrollerfullscreenexit when exiting fullscreen. See index.html for an example usage.

License

This project is licensed under the MIT License.

Package Sidebar

Install

npm i wc-horizontal-scroller

Weekly Downloads

0

Version

0.6.0

License

MIT

Unpacked Size

36.5 kB

Total Files

7

Last publish

Collaborators

  • lukewarlow