3D Carousel Material Design with HTML, CSS, and JQuery

Are you looking for 3D Carousel Material Design with HTML, CSS, and JQuery? Before starting this tutorial, you have to make one folder in your desired location and put images inside the folder. The HTML file also saves the same directory or root folder with an image folder. This is the best tutorial to make 3D Carousel Material Design with HTML, CSS, and JQuery. If you want to add an awesome carousel on your website this is the best. In this tutorial, I am going to show you how to make the 3D carousel Material design with HTML, CSS, and Jquery. I hope this tutorial helpful to you to improve your web development skills. I am trying to show my best experience for you. I have mentioned the source below just copy the source code and paste it into your favorite text editor and run it in your browser. 

 

HTML

<!DOCTYPE html>
<html>
<head>
<title> meterial design</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script
  src="https://code.jquery.com/jquery-3.4.1.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel ="stylesheet" href ="style.css">
</head>
<body>
 <div class="carousel">
    <a class="carousel-item" href="#one"><img src="img-1.jpg">
     <h2>3D CAROUSEL</h2>
     </a>
    <a class="carousel-item" href="#two"><img src="img-2.jpg">
     <h2>3D CAROUSEL</h2>
     </a>
    <a class="carousel-item" href="#three"><img src="img-3.jpg">
     <h2>3D CAROUSEL</h2>
     </a>
    <a class="carousel-item" href="#four"><img src="img-4.jpg">
     <h2>3D CAROUSEL</h2>
     </a>
    <a class="carousel-item" href="#five"><img src="img-5.jpg">
     <h2>3D CAROUSEL</h2>
     </a>
     <a class="carousel-item" href="#six"><img src="img-6.jpg">
     <h2>3D CAROUSEL</h2>
     </a>
     <a class="carousel-item" href="#seven"><img src="img-7.jpg">
     <h2>3D CAROUSEL</h2>
     </a>
     <a class="carousel-item" href="#eight"><img src="img-8.jpg">
     <h2>3D CAROUSEL</h2>
     </a>
   </div>
</body>
</html>

CSS

body{
    margin: 0;
    padding: 0;
    background: #000;
}
.carousel{
    height: 550px;
    perspective: 400px;
    
}
.carousel .carousel-item{
    width: 450px;
    
}
.carousel .carousel-item img{
    width: 100%;
    border-radius: 10px 10px 0 0;
}
.carousel .carousel-item h2{
    margin: -5px 0 0;
    padding: 0;
    background: #fff;
    color:#000;
    box-sizing: border-box;
    padding: 10px 5px;
    font-weight: bold;
    font-size:3em;
    text-align: center;
   }

JS

<script>
  $(document).ready(function(){
    $('.carousel').carousel();
  });
</script>

Leave a Comment