Touch Enabled 3D Photo Carousel

Touch Enabled 3D Photo Carousel
Code Snippet: 3D Carousel
Author: Hoang Tran
Official website: Go to website
Published: 1 week ago
Views: 119

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.

Be the first to comment

Leave a Reply

Your email address will not be published.


*


14 − nine =

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