Wc-horizontal-scroller NPM

Horizontal Scroller Web Component

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.