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.
Accordion slider with background animation
Responsive slider with blur effect using swiper js
First we need to create two files index.html and style.css then we need to do code for it.
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 https-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>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;
}