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: 1 day 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 (over 1 year ago)
• Default Branch: master
• Last Pushed: 2024-02-16T13:44:25.000Z (7 months ago)
• Last Synced: 2024-09-21T02:31:25.155Z (5 days ago)
• Topics: carousel, carousel-component, component, scroller, webcomponent, webcomponents
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/wc-horizontal-scroller
• Size: 354 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

[![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

    
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.

A `scrollerfullscreenenter` event will be dispatched by the element when entering fullscreen, and `scrollerfullscreenexit` when exiting fullscreen. See [index.html](https://github.com/lukewarlow/wc-horizontal-scroller/blob/master/index.html) for an example usage.

## License

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