3d-carousel-js - demo 2

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;
      }
    </style>
  </head>
  <body>
    <carousel-3d>
      <style>
        #items-container > div {
          height: 200px;
          width: 200px;
          background-color: #0000ff90;
          border: 1px solid white;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        #items-container {
          animation: spin 3s infinite;
        }
        @keyframes spin {
          from {
            transform: rotateY(0deg);
          }
          to {
            transform: rotateY(360deg);
          }
        }
      </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>
    </carousel-3d>
  </body>
</html>

JavaScript

import Carousel3D from "3d-carousel-js";

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