webbie-carousel

A web component carousel to display your data in a horizontal scrollable container. It is meant to display an array of data in a homogeneous format such as cards, like the sliders used in Netflix or search result cards on mobile.

Install

Install with npm: npm install webbie-carousel

Usage

Add script to page with <script type="module" src="path/to/dist/webbie-carousel.js"></script>

<webbie-carousel>
    --- Array of Content ---
</webbie-carousel>

Props

All props are optional. The carousel height is set by the height of its content.

| Name | Description | | ---- | ----------- | | text | add a title to the carousel | | subtext | additional text underneath the title | | text-style | custom css for the title | | subtext-style | css for the subtext | | container-style | css for the carousel container | | gap | customize gap between content (default: 10px) | | button-color | custom color for the slider buttons (default: #cccccc) | | button-width | custom width for the buttons (default: 40px) | | arrow-color | custom color for the slider button arrows (default: #555555) | | arrow-size | custom size for the arrows (default: 40px) | | button-opacity | default opacity for buttons (default: 0.5) | | hover-opacity | button opacity on hover (default: 0.8) | | click-opacity | button opacity on click (default: 1) |

Further examples in demo.html