Wednesday, October 16

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

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

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 Reply

Your email address will not be published. Required fields are marked *