Author: | learnwithshero |
---|---|
Views Total: | 833 views |
Official Page: | Go to website |
Last Update: | December 1, 2022 |
License: | MIT |
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>