0.1.1 • Published 3 years ago
@evergreen-wc/eve-carousel v0.1.1
eve-carousel
An Evergreen Carousel Web Component
Install
npm i @evergreen-wc/eve-carouselUsage
import { html, LitElement } from 'lit';
import '@evergreen-wc/eve-carousel';
class MyComponent extends LitElement {
render() {
return html`
<eve-carousel
autoplay
initialSlide="${0}"
speed='2000'
showIndicators
showArrows>
<div class='slide'>Slide 1</div>
<div class='slide'>Slide 2</div>
<div class='slide'>Slide 3</div>
</eve-carousel>
`;
}
}
customElements.define('my-component', MyComponent);Props
| Property | Description |
|---|---|
| autoplay | default false. boolean for toggling autoplay of slideshow |
| speed | Integer for number of ms before slide auto changes |
| initialSlide | Integer for slide index to display first |
| showArrows | show arrow controls for left and right |
| showIndicators | show indicator circles at bottom for slide number |
Events
| Event | Description |
|---|---|
| slideschange | listens for whether to reinitalize slides and indicators if more slides loaded (e.g. lazy loaded) |
Styling
eve-carousel {
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
height:500px;
width:750px;
}
.slide {
background-color:red;
}