Carousel

Setup

To set up, here is the code

import {startup, Carousel} from 'js/es6/mediaviewer.js';
startup(); //Loads up the library

/**
 * Creates a carousel
 * @param {String} container Container to create the carousel in
 * @param {{speed: number, interval: number, autoplay: boolean, loop: boolean, slides: string[], start: number, controls: boolean, indicator: boolean, transition: 'slide'|'fade'|'none'}} config Carousel configuration
 * @param {{}} styles Carousel styles 
 * @param {boolean} [trigger=true] Active the event
 */
new Carousel('.demo', {
// configurations
},
{
// CSS Carousel variables
});

Configurations

Label	Type	Values	Default	Description	Required
speed	Number	+ ♾️	500	Changes the speed of the carousel (in ms)	✖️
interval	Number	+ ♾️	5000	How long to wait until next slide (in ms)	✖️
autoplay	Boolean	true, false	true	Automatically play the slides	✖️
loop	Boolean	true, false	true	Loop around the slides	✖️
slides	String[]		[]	Slides to insert into the carousel	✔️
captions	String[]		[]	Slides to insert into the carousel	✖️
start	Number	+ ♾️	0	Starts at the index of the slide, 0=begining slide	✖️
controls	Boolean	true, false	false	Insert controls on the carousel	✖️
indicator	Boolean	true, false	false	Insert indicators on the carousel	✖️
transition	String	none, slide, fade	"none"	Give transition to the slides	✖️

Styles

Variable	Name	Values	Default	Description
--carousel-control-color	control-color	Color	#cdcdcd	Control forecolor
--carousel-indicator-color	indicator-color	Color	rgb(234, 234, 234)	Indicator forecolor
--carousel-captions-color	captions-color	Color	#eceaea	Captions forecolor

HTML

To operate in HTML, use the following code

<!--Replace ... with any of the valid configurations-->
<div media-carousel controls data-indicator ...>
    <img src="images/img1.jpg" alt="Rome" .../>
    <img src="images/img2.jpg" data-caption="Tiger" .../>
    <img src="images/img3.jpg" data-caption="Sailboat" .../>
</div>
<script type="module" src="autoloader.js"></script>