3D Rotating Carousel With JavaScript And CSS3

Category: Javascript , Slider | December 1, 2022
Views Total:1,216 views
Official Page:Go to website
Last Update:December 1, 2022


3D Rotating Carousel With JavaScript And CSS3


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


  • 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">
    <!-- Text at center of ground -->
  <div id="ground"></div>

You Might Be Interested In:

Leave a Reply