Creating visually appealing and interactive user interfaces is very important in this huge and competitive field of web development. One such attractive and interactive user interface is the 3D Glowing Card Carousel Slider. Today we will design a 3D card carousel slider using CSS animations and a UI component library called Materialize CSS. A glowing effect is also added to the cards through CSS animations. The video tutorial below shows the step-by-step process including styling, plugin implementation, initialization, etc.
Nowadays many types of websites are using this 3D card carousel slider. If you visit e-commerce websites, you will find that they are displaying their popular and new arrival products to the users through this type of carousel slider. Also, they have a dedicated slider for specific brands, promotional deals, etc. If you visit portfolio websites, you will see 3D carousel sliders being used to display project highlights, client testimonials, case studies, etc.
You May Also Like:
- Bootstrap 5 Landing Page Website
- 3D Testimonial Carousel Slider
- Bootstrap 5 Multi-level dropdown Menu
Creative agency and studio-type websites use this type of slider to show their service overview, team profile, creative awards and recognition, etc. Also, real estate websites, tourism websites, news websites, and fashion websites are using 3D carousel sliders to display their content to users these days.
<!DOCTYPE html>
<html lang="en">
<!--
Website: divinectorweb.com
Subscribe Us: https://www.youtube.com/c/Divinector
Support Us: https://www.buymeacoffee.com/divinector
-->
<head>
<meta charset="UTF-8">
<title>How to Create 3D Glowing Card Carousel using Materialize CSS</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="carousel">
<div class="carousel-item"></div>
<div class="carousel-item"></div>
<div class="carousel-item"></div>
<div class="carousel-item"></div>
<div class="carousel-item"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
$(document).ready(function(){
$('.carousel').carousel({
padding: 200
});
autoplay();
function autoplay() {
$('.carousel').carousel('next');
setTimeout(autoplay, 4500);
}
});
</script>
</body>
</html>
body {
margin: 0;
padding: 0;
background: #021514;
}
.carousel{
height: 600px;
perspective: 400px;
margin-top: 5%;
}
.carousel .carousel-item {
width: 400px;
height: 500px;
box-shadow: 0 0 40px #61dafb, 0 0 40px #61dafb, 0 0 40px #61dafb;
animation: animate 2s infinite alternate;
border-radius: 15px;
}
@keyframes animate {
to {
box-shadow: 0 0 50px #61dafb, 0 0 50px #61dafb, 0 0 50px #61dafb;
}
}
For the Original Code: Click Here
Top comments (0)