4.1K
3D carousel materialize using HTML, CSS, and jQuery
In this tutorial, I am going to create a 3D carousel materialize using HTML, CSS, and jQuery. First, you have to make a folder and put desired images inside the folder with the same directory of HTML and CSS. When we click the image, the clicked image comes into the front. you can click right or left both side effect is the same.
HTML
<!DOCTYPE html>
<html>
<head>
<title>3D Carousel Animated Profile Card </title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="carousel">
<div class="carousel-item">
<img src="bg1.jpg">
<h3>Merry Joe</h3>
<div class="social">
<a href="#"><i class ="fa fa-facebook"></i></a>
<a href="#"><i class ="fa fa-twitter"></i></a>
<a href="#"><i class ="fa fa-instagram"></i></a>
<a href="#"><i class ="fa fa-youtube"></i></a>
<a href="#"><i class ="fa fa-linkedin"></i></a>
</div>
</div>
<div class="carousel-item">
<img src="bg2.jpg">
<h3>Krishtina Patel</h3>
<div class="social">
<a href="#"><i class ="fa fa-facebook"></i></a>
<a href="#"><i class ="fa fa-twitter"></i></a>
<a href="#"><i class ="fa fa-instagram"></i></a>
<a href="#"><i class ="fa fa-youtube"></i></a>
<a href="#"><i class ="fa fa-linkedin"></i></a>
</div>
</div>
<div class="carousel-item">
<img src="bg3.jpg">
<h3>Komal Sharma</h3>
<div class="social">
<a href="#"><i class ="fa fa-facebook"></i></a>
<a href="#"><i class ="fa fa-twitter"></i></a>
<a href="#"><i class ="fa fa-instagram"></i></a>
<a href="#"><i class ="fa fa-youtube"></i></a>
<a href="#"><i class ="fa fa-linkedin"></i></a>
</div>
</div>
<div class="carousel-item">
<img src="bg4.jpg">
<h3>Phatima Khan</h3>
<div class="social">
<a href="#"><i class ="fa fa-facebook"></i></a>
<a href="#"><i class ="fa fa-twitter"></i></a>
<a href="#"><i class ="fa fa-instagram"></i></a>
<a href="#"><i class ="fa fa-youtube"></i></a>
<a href="#"><i class ="fa fa-linkedin"></i></a>
</div>
</div>
<div class="carousel-item">
<img src="bg5.jpg">
<h3>Merry Koum</h3>
<div class="social">
<a href="#"><i class ="fa fa-facebook"></i></a>
<a href="#"><i class ="fa fa-twitter"></i></a>
<a href="#"><i class ="fa fa-instagram"></i></a>
<a href="#"><i class ="fa fa-youtube"></i></a>
<a href="#"><i class ="fa fa-linkedin"></i></a>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.carousel').carousel();
});
</script>
</body>
</html>
CSS
body{
margin: 0;
padding: 0;
background:#101010;
font-family: monospace;
}
.carousel{
height: 900px;
perspective: 800px;
margin-top: -310px;
}
.carousel .carousel-item{
width:280px;
cursor: pointer;
}
img{
width:100%;
border-radius: 0 0 50px 50px;
}
.carousel .carousel-item h3{
margin: 0;
margin-top:-100px;
font-weight: bold;
background: #fff;
padding: 100px 5px;
color:#000;
font-size: 2em;
box-sizing: border-box;
text-align: center;
}
.social{
text-align: center;
margin-top: -80px;
}
.social a{
color:#000;
font-size: 25px;
padding: 5px;
border:2px solid #000;
border-radius: 5px;
}
