@evergreen-wc/eve-carousel

eve-carousel

An Evergreen Carousel Web Component

• Demo

• Codepen

Install

npm i @evergreen-wc/eve-carousel

Usage

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;
  }