3D Event Carousel Slider

3D Event Carousel Slider

A 3D Event carousel is a type of web UI element that allows users to view and interact with a collection of items. This type of carousel is visually appealing and an interactive way to display events, products, or other content. A carousel uses different visual effects such as perspective, depth, and shadows to bring out a 3D vibe. The 3D carousel that we’ve created in our example today is the one we commonly see on wedding invitation websites. The step-by-step procedure for creating this snippet is given below in the form of a video tutorial. All viewers are requested to watch the video below. This will help you understand the source code. There are a lot of videos on front-end development on our YouTube channel. If you find our channel content useful, you can subscribe to our channel.

Video Tutorial:

Hope you have watched the step-by-step video tutorial. There are many places where a 3d event carousel can be found. Some of these are web design, digital marketing, the event planning industry, etc. This 3d event carousel is usually used to display products or other content in an engaging and interactive way. This 3d carousel can be built with custom HTML, CSS, and javascript. But we have created this event carousel by customizing the ready-made carousel of Materialize CSS framework. The video above shows the details of how the carousel is initiated, starting from adding Materialize's CDN and so on.

You May Also Like:

3D Event Carousel Slider [ Source Code ]:

There are two files needed to create this snippet. One is HTML and the other one is CSS. In the video above, we showed you how to add Materialize CSS CDN to your project. You can copy and paste the code into your files by using the code box below. You can get the code from the download button if it's not working.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
    <meta charset="UTF-8">
    <title>How to 3D Pricing Carousel using Materialize CSS</title> 
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
    <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>   
    
  <h2>Wedding Event</h2>
	<div class="carousel">
		<div class="carousel-item">
			<div class="card">
				<div class="img-area" style="background-image: url(img/1.jpg);"></div>
				<div class="container">
					<h4>Jane's Engagement</h4>
					<p><i>Dec 12, 2023 at 2:00 PM</i></p>
					<p>161 Houston, USA</p><button class="btn">RSVP</button>
				</div>
			</div>
		</div>
		<div class="carousel-item">
			<div class="card">
				<div class="img-area" style="background-image: url(img/2.jpg);"></div>
				<div class="container">
					<h4>Wedding Ceremony</h4>
					<p><i>Dec 15, 2023 at 2:00 PM</i></p>
					<p>321 Phoenix, USA</p><button class="btn">RSVP</button>
				</div>
			</div>
		</div>
		<div class="carousel-item">
			<div class="card">
				<div class="img-area" style="background-image: url(img/3.jpg);"></div>
				<div class="container">
					<h4><b>Post Wedding Reception</b></h4>
					<p><i>Dec 21, 2023 at 2:00 PM</i></p>
					<p>125 San Diego, USA</p><button class="btn">RSVP</button>
				</div>
			</div>
		</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>

ADD CSS:

body {
	margin: 0; 
	padding: 0;
	background: #08091d; 
}
h2 {
	font-family: 'Bebas Neue', cursive;
	color: #fff;
	text-align: center;
	margin: 40px 0 -50px;
	padding-bottom: 20px;
	background-image: url(img/border.png);
	background-repeat: no-repeat;
	background-position: center bottom;
}
.carousel{
    height: 600px; 
    perspective: 200px;
}
.carousel .carousel-item{
	width: 640px;
	height: 400px;
}
.card {
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	max-width: 500px;
	margin: auto;
	text-align: center;
	border-radius: 10px;
	height: 450px;
  }
.img-area{
	border-radius: 10px 10px 0 0;
	height: 200px;
	background-size: cover;
	background-position: center center;
}
h4 {
	font-size: 35px;
	line-height: 1.5;
	margin: 15px 0;
	font-family: 'Bebas Neue', cursive;
}
.card p{
	font-size: 17px;
}

.container {
  padding: 2px 16px;
}

We are hoping that the code is working for you. To explore our website, click on the Load More button on the homepage and scroll down. Maybe you can find a snippet you like. If you like the content of our website, then share it with others. Others may also benefit from it. Thank you very much for visiting our website.

DOWNLOAD CODE

Post a Comment

Please Do not Enter any spam link in the comment box