Hello guys in this tutorial we will create 3D carousel using HTML CSS & JavaScript
What is Carousel: Carousels allow multiple pieces of content to occupy a single, coveted space. This may placate corporate infighting, but on large or small viewports, people often scroll past carousels.
This is a JavaScript tutorial for beginners in this tutorial we will create an beautiful 3D carousel.
3D Animated Carousel Step:1
Add below code inside index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>3D Carousel</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="card-outer">
<div class="card-inner">
<div class="card" data-card="4">
<div class="image">
<img src="05.jpg">
</div>
<div class="info">
<h2>This is title</h2>
<p>Stack Findover is the largest, most trusted online community for developers</p>
</div>
<div class="next">
<i class="fa fa-arrow-right"></i>
</div>
</div>
<div class="card" data-card="3">
<div class="image">
<img src="04.jpg">
</div>
<div class="info">
<h2>This is title</h2>
<p>Stack Findover is the largest, most trusted online community for developers</p>
</div>
<div class="next">
<i class="fa fa-arrow-right"></i>
</div>
</div>
<div class="card" data-card="2">
<div class="image">
<img src="03.jpg">
</div>
<div class="info">
<h2>This is title</h2>
<p>Stack Findover is the largest, most trusted online community for developers</p>
</div>
<div class="next">
<i class="fa fa-arrow-right"></i>
</div>
</div>
<div class="card" data-card="1">
<div class="image">
<img src="02.jpg">
</div>
<div class="info">
<h2>This is title</h2>
<p>Stack Findover is the largest, most trusted online community for developers</p>
</div>
<div class="next">
<i class="fa fa-arrow-right"></i>
</div>
</div>
<div class="card" data-card="0">
<div class="image">
<img src="01.jpg">
</div>
<div class="info">
<h2>This is title</h2>
<p>Stack Findover is the largest, most trusted online community for developers</p>
</div>
<div class="next">
<i class="fa fa-arrow-right"></i>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
(function () {
var rotate, timeline;
rotate = function() {
return $(".card:first-child").fadeOut(400, 'swing', function(){
return $(".card:first-child").appendTo('.card-inner').hide();
}).fadeIn(400, 'swing');
};
$('.next').click(function(){
return rotate();
});
}).call(this);
</script>
</html>
3D Animated Carousel Step:2
Then we need to add code for style.css which code i provide in below screen.
* {
padding: 0;
margin: 0;
font-family: 'IBM Plex Sans', sans-serif;
color: #fff;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f1f2f3;
}
.card-inner {
position: relative;
width: 300px;
height: 300px;
}
.card img {
width: 100%;
display: block;
}
.card {
position: absolute;
top: 0;
left: 0;
background: #fff;
width: 300px;
height: 300px;
border-radius: 3px;
overflow: hidden;
box-shadow: 0 0 12px rgba(0,0,0,0.1);
transition: 0.5s linear all;
font-size: 12px;
}
.info {
padding: 10px 15px;
position: relative;
}
.info h2 {
font-size: 22px;
color: #4b00ff;
margin-bottom: 10px;
}
.info p {
font-size: 15px;
color: #000;
}
.card {
transform-origin: top;
}
.card:nth-child(1) {
top: 0;
transform: scale(1);
opacity: 1;
z-index: 10;
}
.card:nth-child(2) {
top: -15px;
transform: scale(0.9);
opacity: 0.9;
z-index: 9;
}
.card:nth-child(3) {
top: -30px;
transform: scale(0.8);
opacity: 0.8;
z-index: 8;
}
.card:nth-child(4) {
top: -45px;
transform: scale(0.7);
opacity: 0.7;
z-index: 7;
}
.card:nth-child(5) {
top: -60px;
transform: scale(0.6);
opacity: 0.6;
z-index: 6;
}
.card:first-child:hover {
box-shadow: 0 0 20px rgba(0,0,0,0.2);
}
.card:last-child{
opacity: 0;
}
.next {
position: absolute;
bottom: 0;
right: 0;
width: 40px;
height: 40px;
background: #4b00ff;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
cursor: pointer;
}
3D Animated Carousel Video Output:
3D Animated Carousel codepen Output:
Top comments (0)