Touch Enabled 3D Photo Carousel

The “3D-Carousel.js” is a lightweight JavaScript plugin that helps you to create a touch enabled 3D photo carousel. It comes with built-in touch support to slide the images with a swipe (on touch devices). Similarly, it supports the mouse wheel to scroll the carousel images.

You can place both images and videos in this carousel. Similarly, you can wrap each image/video with a hyperlink. The plugin also renders HTML5 audio player to play music with the slider to make a 3D photo slideshow. You can control the plugin features through global variables. Like, you can set the custom value for images dimension, auto rotate, and rotate speed, etc.

How to Create Touch Enabled 3D Photo Carousel

1. First, download the project and include the 3D Carousel CSS file into the head tag of your HTML document.

<!-- 3D Carousel CSS -->
<link rel="stylesheet" href="css/3d-carousel.css">

2. Create the HTML structure for your photo carousel as follows:

<div id="drag-container">
   <div id="spin-container">
      <!-- Add your images (or video) here -->
      <img src="https://images.pexels.com/photos/206395/pexels-photo-206395.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" />
      <img src="https://images.pexels.com/photos/1391498/pexels-photo-1391498.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" />
      <img src="https://images.pexels.com/photos/1382731/pexels-photo-1382731.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" />
      <img src="https://images.pexels.com/photos/1758144/pexels-photo-1758144.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" />
      <img src="https://images.pexels.com/photos/1382734/pexels-photo-1382734.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" />
      <img src="https://images.pexels.com/photos/1462636/pexels-photo-1462636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" />
      <!-- Example image with link -->
      <a target="_blank" href="https://images.pexels.com/photos/139829/pexels-photo-139829.jpeg" >
      <img src="https://images.pexels.com/photos/139829/pexels-photo-139829.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" />
      </a>
      <!-- Example add video  -->
      <video controls autoplay="autoplay" loop>
         <source src="https://player.vimeo.com/external/322244668.sd.mp4?s=338c48ac2dfcb1d4c0689968b5baf94eee6ca0c1&profile_id=165&oauth2_token_id=57447761" type="video/mp4" />
      </video>
      <!-- Text at center of ground -->
      <p>3D Tiktok Carousel</p>
   </div>
   <div id="ground"></div>
</div>
<div id="music-container"></div>

3. Load the 3D Carousel JS file at the end of the above HTML and done.

<!-- 3D Carousel JS -->
<script src="js/3d-carousel.js"></script>

4. Redefine global variables to customize the radius, autoplay, rotate speed, image size, etc.

      var radius = 240; // how big of the radius
      var autoRotate = true; // auto rotate or not
      var rotateSpeed = -60; // unit: seconds/360 degrees
      var imgWidth = 120; // width of images (unit: px)
      var imgHeight = 170; // height of images (unit: px)

That’s all! Hopefully, you have successfully integrated this 3D photo carousel into your project. If you have any questions or suggestions, let me know by comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.