carousel = function (images, options = {}) { const { animDuration = 60, translateY = 0, translateZ = 300, height = 400, size = 200, perspective = 900, imgCornerRadius = 5, imgBorderColor = "rgba(0,0,0,1)", imgBorderSize = 5, imgBorderOpacity = 0.1, background = "rgba(0,0,0,0.1)" } = options; let css = ` #carousel_main{ display: flex; background : ${background}; height: ${height}px; align-items: center; align-content: center; justify-content: center; } #carousel figure { display: flex; position: absolute; align-items: center; align-content: center; justify-content: center; top: 0; bottom: 0; left: 0; right:0; margin: auto; } #carousel figure img { border: ${imgBorderSize}px solid ${d3 .color(imgBorderColor) .copy({ opacity: imgBorderOpacity }) .formatRgb()}; border-radius: ${imgCornerRadius}px; } .carousel_container { position: relative; padding:0px; display: flex; align-items: center; align-content: center; justify-content: center; width: ${size}px; height: ${size}px; -webkit-perspective: ${perspective}px; perspective: ${perspective}px; } #carousel { width: 100%; height: 100%; position: absolute; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } #carousel.running{ animation: spinY ${animDuration}s infinite normal linear forwards; } @keyframes spinY { 0% {transform:rotateY(360deg);} 100% {transform:rotateY(0deg);} } `; let body = html`

`; let figures = body.querySelector("#carousel"); const n = images.length; for (let i = 0; i < n; i++) { css += `#carousel figure:nth-child(${i + 1}) { -webkit-transform: rotateY(${ (360 / n) * i }deg) translateY(${translateY}px) translateZ(${translateZ}px);\n}\n`; figures.append(html`

${images[i]}`); } return html`${body}`; }

Purpose-built for displays of data