3D Rotating Carousel With JavaScript And CSS3

Category: Javascript , Slider | December 1, 2022
Author:learnwithshero
Views Total:380 views
Official Page:Go to website
Last Update:December 1, 2022
License:MIT

Preview:

3D Rotating Carousel With JavaScript And CSS3

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>

You Might Be Interested In:


Leave a Reply