3d-carousel-js - demo 3

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script type="importmap">
			{
			"imports": {
					"3d-carousel-js": "https://cdn.jsdelivr.net/npm/3d-carousel-js@latest/dist/index.module.js"
				}
			}
		</script>
    <title>Carousel 3D</title>
    <style>
      * {
        box-sizing: border-box;
      }
      
      html,
      body {
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
      }
      
      #controls {
        position: absolute;
        top: 0;
      }
    </style>
  </head>
  <body>
    <carousel-3d id="carousel" vertical rotate-negative>
      <style>
        #items-container > div {
          height: 50vh;
          width: 200px;
          background-color: #0000ff90;
          border: 1px solid white;
          display: flex;
          justify-content: center;
          align-items: center;
          transition: 1s ease-in;
          contain: strict;
        }
        
        #items-container {
          transition: 0.15s ease-in;
          will-change: transform;
        }
        
        .filler {
          opacity: 0;
        }
      </style>
      <div><img src="https://placedog.net/100/120" /></div>
      <div><img src="https://placedog.net/150/110" /></div>
      <div><img src="https://placedog.net/80/100" /></div>
      <div><img src="https://placedog.net/110/105" /></div>
      <div><img src="https://placedog.net/120/115" /></div>
      <div class="filler"></div>
      <div class="filler"></div>
      <div class="filler"></div>
      <div class="filler"></div>
      <div class="filler"></div>
      <div class="filler"></div>
    </carousel-3d>
    <div id="controls">
      <button id="prev">prev</button>
      <button id="next">next</button>
    </div>
  </body>
</html>

JavaScript

import Carousel3D from "3d-carousel-js";
customElements.define("carousel-3d", Carousel3D);

const carouselElem = document.getElementById("carousel");

const maxRots = 5;
const minRots = 0;
let numRotations = 0;

const rotate = () => carouselElem.itemsContainer.style.transform = `rotateX(${numRotations * carouselElem.rotDeg}deg)`
const mod = (n, m) => (((n % m) + m) % m)


document.getElementById("prev").onclick = () => {
	numRotations = mod((numRotations - 1), maxRots);
	rotate();
}

document.getElementById("next").onclick = () => {
	numRotations = mod((numRotations + 1), maxRots);
	rotate();
}