1.0.5 • Published 12 months ago
webbie-carousel v1.0.5
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