Published
Edited
May 26, 2022
Importers
demoCards = ["abscd", html`<h1>test</h1>`, "b3", "c", "d", "f"]
carousel(demoCards, { title: "My carousel" }, { perPage: 3 })
carousel = function*(cards, opts = {}, siemaOpts = {}) {
const options = {
title: "Default title",
...opts
};
const carouselElem = html`<div class="carousel">
${cards.map(c => html`<div class="carousel-card">${c}</div>`)}
</div>`;
const prev = html`<button class="prev"><i class="ph-arrow-circle-left-thin"></i></button>`;
const next = html`<button class="next"><i class="ph-arrow-circle-right-thin"></i></button>`;
yield html`
<div class="carousel-head">
<h3>${opts.title}</h3>
<div class="nav">${prev} ${next}</div>
</div>
${carouselElem}
`;
let siemaCarousel = new siema({
selector: carouselElem,
...siemaOpts,
});
prev.addEventListener('click', () => siemaCarousel.prev());
next.addEventListener('click', () => siemaCarousel.next());
}
<style>
.carousel-head {
display: flex;
}
.carousel-card {
border-right: 1px solid black;
background-color: papayawhip;
height: 100%;
}
</style>
phosphor = import('https://cdn.skypack.dev/phosphor-icons@1.4.2?min')
siema = require("siema")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
