3D Carousel With Images | Carousel Using html css javascript

3D Carousel With Images | Carousel Using html css javascript

3D Carousel With Images | Carousel Using html css javascript


Welcome🎉 to Code With Random blog. In this blog, we learn that how we create a Parallax Tilt Effect. We use HTML, Css, and javascript for this 3D Carousel. Hope you enjoy our blog so let's start with a basic HTML structure for a 3D Carousel.

HTML code

 <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="">  
  </div>  
  <div id="ground"></div>  
 </div>  
There is all HTML code for the  3D Carousel. Now, you can see output without CSS, then we write css & javascript for the  3D Carousel.
output
3D Carousel With Images | Carousel Using html css javascript

3D Carousel With Images | Carousel Using html css javascript

CSS Code

 <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="">  
  </div>  
  <div id="ground"></div>  
 </div>  
 * {  
  margin: 0;  
  padding: 0;  
 }  
 html,  
 body {  
  height: 100%;  
  /* for touch screen */  
  touch-action: none;   
 }  
 body {  
  overflow: hidden;  
  display: -webkit-box;  
  display: -ms-flexbox;  
  display: flex;  
  background: #111;  
  -webkit-perspective: 1000px;  
      perspective: 1000px;  
  -webkit-transform-style: preserve-3d;  
      transform-style: preserve-3d;  
 }  
 #drag-container, #spin-container {  
  position: relative;  
  display: -webkit-box;  
  display: -ms-flexbox;  
  display: flex;  
  margin: auto;  
  -webkit-transform-style: preserve-3d;  
      transform-style: preserve-3d;  
  -webkit-transform: rotateX(-10deg);  
      transform: rotateX(-10deg);  
 }  
 #drag-container img, #drag-container video {  
  -webkit-transform-style: preserve-3d;  
      transform-style: preserve-3d;  
  position: absolute;  
  left: 0;  
  top: 0;  
  width: 100%;  
  height: 100%;  
  line-height: 200px;  
  font-size: 50px;  
  text-align: center;  
  -webkit-box-shadow: 0 0 8px #fff;  
      box-shadow: 0 0 8px #fff;  
  -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0005);  
 }  
 #drag-container img:hover, #drag-container video:hover {  
  -webkit-box-shadow: 0 0 15px #fffd;  
      box-shadow: 0 0 15px #fffd;  
  -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0007);  
 }  
 #drag-container p {  
  font-family: Serif;  
  position: absolute;  
  top: 100%;  
  left: 50%;  
  -webkit-transform: translate(-50%,-50%) rotateX(90deg);  
      transform: translate(-50%,-50%) rotateX(90deg);  
  color: #fff;  
 }  
 #ground {  
  width: 900px;  
  height: 900px;  
  position: absolute;  
  top: 100%;  
  left: 50%;  
  -webkit-transform: translate(-50%,-50%) rotateX(90deg);  
      transform: translate(-50%,-50%) rotateX(90deg);  
  background: -webkit-radial-gradient(center center, farthest-side , #9993, transparent);  
 }  
 #music-container {  
  position: absolute;  
  top: 0;  
  left: 0;  
 }  
 @-webkit-keyframes spin {  
  from{  
   -webkit-transform: rotateY(0deg);  
       transform: rotateY(0deg);  
  } to{  
   -webkit-transform: rotateY(360deg);  
       transform: rotateY(360deg);  
  }  
 }  
 @keyframes spin {  
  from{  
   -webkit-transform: rotateY(0deg);  
       transform: rotateY(0deg);  
  } to{  
   -webkit-transform: rotateY(360deg);  
       transform: rotateY(360deg);  
  }  
 }  
 @-webkit-keyframes spinRevert {  
  from{  
   -webkit-transform: rotateY(360deg);  
       transform: rotateY(360deg);  
  } to{  
   -webkit-transform: rotateY(0deg);  
       transform: rotateY(0deg);  
  }  
 }  
 @keyframes spinRevert {  
  from{  
   -webkit-transform: rotateY(360deg);  
       transform: rotateY(360deg);  
  } to{  
   -webkit-transform: rotateY(0deg);  
       transform: rotateY(0deg);  
  }  
 }  

Here is our updated output CSS.

output
3D Carousel With Images | Carousel Using html css javascript
Ground ready for Carousel

Javascript code 

 // Author: Hoang Tran (https://www.facebook.com/profile.php?id=100004848287494)  
 // Github verson (1 file .html): https://github.com/HoangTran0410/3DCarousel/blob/master/index.html  
 // You can change global variables here:  
 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)  
 // Link of background music - set 'null' if you dont want to play background music  
 var bgMusicURL = 'https://api.soundcloud.com/tracks/143041228/stream?client_id=587aa2d384f7333a886010d5f52f302a';  
 var bgMusicControls = true; // Show UI music control  
 /*  
    NOTE:  
     + imgWidth, imgHeight will work for video  
     + if imgWidth, imgHeight too small, play/pause button in <video> will be hidden  
     + Music link are taken from: https://hoangtran0410.github.io/Visualyze-design-your-own-/?theme=HauMaster&playlist=1&song=1&background=28  
     + Custom from code in tiktok video https://www.facebook.com/J2TEAM.ManhTuan/videos/1353367338135935/  
 */  
 // ===================== start =======================  
 // animation start after 1000 miliseconds  
 setTimeout(init, 1000);  
 var odrag = document.getElementById('drag-container');  
 var ospin = document.getElementById('spin-container');  
 var aImg = ospin.getElementsByTagName('img');  
 var aVid = ospin.getElementsByTagName('video');  
 var aEle = [...aImg, ...aVid]; // combine 2 arrays  
 // Size of images  
 ospin.style.width = imgWidth + "px";  
 ospin.style.height = imgHeight + "px";  
 // Size of ground - depend on radius  
 var ground = document.getElementById('ground');  
 ground.style.width = radius * 3 + "px";  
 ground.style.height = radius * 3 + "px";  
 function init(delayTime) {  
  for (var i = 0; i < aEle.length; i++) {  
   aEle[i].style.transform = "rotateY(" + (i * (360 / aEle.length)) + "deg) translateZ(" + radius + "px)";  
   aEle[i].style.transition = "transform 1s";  
   aEle[i].style.transitionDelay = delayTime || (aEle.length - i) / 4 + "s";  
  }  
 }  
 function applyTranform(obj) {  
  // Constrain the angle of camera (between 0 and 180)  
  if(tY > 180) tY = 180;  
  if(tY < 0) tY = 0;  
  // Apply the angle  
  obj.style.transform = "rotateX(" + (-tY) + "deg) rotateY(" + (tX) + "deg)";  
 }  
 function playSpin(yes) {  
  ospin.style.animationPlayState = (yes?'running':'paused');  
 }  
 var sX, sY, nX, nY, desX = 0,  
   desY = 0,  
   tX = 0,  
   tY = 10;  
 // auto spin  
 if (autoRotate) {  
  var animationName = (rotateSpeed > 0 ? 'spin' : 'spinRevert');  
  ospin.style.animation = `${animationName} ${Math.abs(rotateSpeed)}s infinite linear`;  
 }  
 // add background music  
 if (bgMusicURL) {  
  document.getElementById('music-container').innerHTML += `  
 <audio src="${bgMusicURL}" ${bgMusicControls? 'controls': ''} autoplay loop>    
 <p>If you are reading this, it is because your browser does not support the audio element.</p>  
 </audio>  
 `;  
 }  
 // setup events  
 document.onpointerdown = function (e) {  
  clearInterval(odrag.timer);  
  e = e || window.event;  
  var sX = e.clientX,  
    sY = e.clientY;  
  this.onpointermove = function (e) {  
   e = e || window.event;  
   var nX = e.clientX,  
     nY = e.clientY;  
   desX = nX - sX;  
   desY = nY - sY;  
   tX += desX * 0.1;  
   tY += desY * 0.1;  
   applyTranform(odrag);  
   sX = nX;  
   sY = nY;  
  };  
  this.onpointerup = function (e) {  
   odrag.timer = setInterval(function () {  
    desX *= 0.95;  
    desY *= 0.95;  
    tX += desX * 0.1;  
    tY += desY * 0.1;  
    applyTranform(odrag);  
    playSpin(false);  
    if (Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5) {  
     clearInterval(odrag.timer);  
     playSpin(true);  
    }  
   }, 17);  
   this.onpointermove = this.onpointerup = null;  
  };  
  return false;  
 };  
 document.onmousewheel = function(e) {  
  e = e || window.event;  
  var d = e.wheelDelta / 20 || -e.detail;  
  radius += d;  
  init(1);  
 };  
Final output
3D Carousel With Images | Carousel Using html css javascript


Now we have completed our javascript section,  Here is our updated output with javascriptHope you like the  3D Carousel. you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create a 3D Carousel using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by - Code With Random/Anki 

Codepen by - hoangtran

Post a Comment

Previous Post Next Post