https://github.com/trovster/coverflow

A Web Component for a Coverflow-style list of images.
https://github.com/trovster/coverflow

coverflow images web-component

Last synced: about 2 months ago
JSON representation

A Web Component for a Coverflow-style list of images.

• Host: GitHub
• URL: https://github.com/trovster/coverflow
• Owner: trovster
• License: mit
• Created: 2024-11-15T17:14:37.000Z (2 months ago)
• Default Branch: main
• Last Pushed: 2024-11-15T17:14:45.000Z (2 months ago)
• Last Synced: 2024-12-06T21:05:26.779Z (about 2 months ago)
• Topics: coverflow, images, web-component
• Language: JavaScript
• Homepage: https://trovster.github.io/coverflow/
• Size: 398 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
![](./screenshot.webp)

# Coverflow Component

This provides a Web Component for an interface similar to Coverflow.

## Installation

```bash

npm install @trovster/coverflow --save

```

## Usage

These are [Web

Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_Components) and

must be imported before the custom elements can be used.

```html

  import '@trovster/coverflow/src/Coverflow.js';

```

You should create a list of images and then wrap them in `` to turn

them into a Coverflow component.

```html

  


    


    


    


    


  


```

### Styling

You should set the background using the `--bg` CSS variable. This is used to mask

the relection correctly. This defaults to `#fff`.

## Development

### Linting and Formatting

To scan the project for linting and formatting errors, run:

```bash

npm run lint

```

To automatically fix linting and formatting errors, run:

```bash

npm run format

```

### Local Demo with `web-dev-server`

To start a local development server that serves the basic demo located in

`docs/index.html`, run:

```bash

npm start

```

### Tooling Configs

For most of the tools, the configuration is in the `package.json` to minimize

the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to

individual files.