@mrpullen/fluentui-carousel v1.0.7

FluentUI Carousel

The goal of this project is to build a fluentui-carousel. I intend to use this on my Handlebars WebPart - with other FluentUI WebComponents.

Fluent Carousel Spec

I would like to be able to have the implementation work similiar to this..

SPECIFICATION

I've taken most of the design considerations from the link below into account - will work on shoring this up in the next several revisions.

FAST CAROUSEL

Usage

    <fluentui-carousel autoplay="true" autoplay-interval="3000" loop="true">
        <div class="slide">Slide 1</div>
        <div class="slide">Slide 2</div>
        <div class="slide"><h3>This is an example of an incredibly long slide title that should be hidden by the component</h3></div>
        <div class="slide">Slide 4</div>
        <div class="slide">Slide 5</div>
    </fluentui-carousel>

CSS Customizations

fluentui-carousel {
  --carousel-controls: #106ebe;
  --carousel-controls-hover: #022f55;
  --carousel-controls-active: #022f55;
  --carousel-controls-hover-background: rgba(255, 255, 255, 0.4);
  --carousel-slide-transition: transform 0.5s ease; 
  --carousel-indicator-width: 10px;
  --carousel-indicator-height: 10px;
  --carousel-indicator-margin: 0 2px;
  --carousel-indicator-border-radius: 100%;
  --carousel-indicator-opacity: .5;
}