Touch Enabled 3D Photo Carousel

Touch Enabled 3D Photo Carousel
Code Snippet:3D Carousel
Author: Hoang Tran
Published: January 11, 2024
Last Updated: January 22, 2024
Downloads: 5,698
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X