3D Rotating Carousel With JavaScript And CSS3

Preview:

Description:

A draggable, zoomable, touch-enable, 3D rotating carousel made with vanilla JavaScript and CSS3 transforms.

Features:

• Rotate through items with mouse drag and touch gestures.
• Zoom in/out the carousel with mouse wheel.
• Supports both images and videos.

How to use it:

1. Load the needed stylesheet and JavaScript in the HTML document.

<link rel="stylesheet" href="./style.css" />
<script src="./script.js"></script>

2. Add your images and videos to the carousel.

<div id="drag-container">
  <div id="spin-container">
    <!-- Add your images (or video) here -->
    <img src="1.jpg" alt="">
    <img src="2.jpg" alt="">
    <img src="3.jpg" alt="">
      ...
    <!-- Video  -->
    <video controls autoplay="autoplay" loop>
      <source src="1.mp4" type="video/mp4">
    </video>
    <!-- Text at center of ground -->
    <p>CSSScript</p>
  </div>
  <div id="ground"></div>
</div>