Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Carousel using Materialize CSS

  • Last Updated : 09 Oct, 2021

Materialize CSS is a UI component library that is created and designed by Google. It is a design language that combines the classic principles of successful design along with innovation and technology.

Features:

  • Responsive front-end CSS framework.
  • It is browser-independent.
  • Extensible.
  • It is free to use.
  • Its emphasis is on different actions and components.
  • Requires usage of jQuery JavaScript library.

In this article, we are going to create a 3D carousel using materialize CSS which is very interesting as well as easy to design. Materialize CSS carousel is a robust and versatile component. It is touch-enabled which makes it smooth to use on mobile. 

 



Syntax:

HTML




<div class="carousel">
    <a class="carousel-item" href="#one!">
        <img src="">
    </a>
    <a class="carousel-item" href="#two!">
        <img src="">
    </a>
    <a class="carousel-item" href="#three!">
        <img src="">
    </a>
    <a class="carousel-item" href="#four!">
        <img src="">
    </a>
    <a class="carousel-item" href="#five!">
        <img src=""
    ></a>
</div>

jQuery/JavaScript for initialization:

Javascript




document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.carousel');
    var instances = M.Carousel.init(elems, options);
});
    
$(document).ready(function(){
    $('.carousel').carousel();
});

Example 1: Using the above code snippets, we can easily create our carousel by giving the source for the images and hyperlinks (if needed) for those images. Let us look at the example below.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href=
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  
    <script type="text/javascript" 
    </script>
  
    <!-- Compiled and minified JavaScript -->
    <script src=
    </script>
      
    <script>
        $(document).ready(function () {
            $('.carousel').carousel();
        });
    </script>
  
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: coral;
        }
  
        a {
            height: 900px;
            width: 650px;
        }
  
        .carousel {
            height: 800px;
            perspective: 950px;
            transform: translateY(-100px);
        }
  
        .carousel carousel-item {
            width: 7050px;
        }
  
        img {
            width: 100%;
            height: 200px;
        }
  
        h4 {
            margin: 0;
            padding: 0;
            background: #fff;
            color: #000;
            box-sizing: border-box;
            padding: 10px 5px;
            font-weight: bold;
            font-size: 20px;
            text-align: center;
        }
    </style>
</head>
  
<body>
    <div class="carousel">
        <div class="carousel-item">
            <a href=
                <img src=
            </a>
            <h4>Responsive image gallery</h4>
        </div>
          
        <div class="carousel-item">
            <a href=
                <img src=
            </a>
            <h4>Tab image gallery</h4>
        </div>
  
        <div class="carousel-item">
            <a href=
                <img src=
            </a>
            <h4>Building header of a website</h4>
        </div>
  
        <div class="carousel-item">
            <a href=
                <img src=
            </a>
            <h4>image slider</h4>
        </div>
  
        <div class="carousel-item">
            <a href=
                <img src=
            </a>
            <h4>image lightbox gallery</h4>
        </div>
    </div>
</body>
  
</html>

Output:

Full-width slider: In the same manner, we can also create a full-width slider by setting the jQuery fullWidth option to true. We can also have indicators that show up at the bottom of the slider. This slider is also touched compatible.



To create this type of slider we have a class as “carousel carousel-slider” and inside this div, we place the images used to create the slider as shown below.

HTML




<div class="carousel carousel-slider">
    <a class="carousel-item" href="#one!">
        <img src="">
    </a>
    <a class="carousel-item" href="#two!">
        <img src="">
    </a>
    <a class="carousel-item" href="#three!">
        <img src="">
    </a>
    <a class="carousel-item" href="#four!">
        <img src="">
    </a>
</div>

jQuery script will be changed as shown below.

Javascript




$('.carousel.carousel-slider').carousel({
    fullWidth: true
});

Example 2:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href=
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
  
    <script type="text/javascript" 
    </script>
  
    <!-- Compiled and minified JavaScript -->
    <script src=
    </script>
  
    <script>
        $(document).ready(function () {
            $('.carousel.carousel-slider').carousel(
                {
                    fullWidth: true,
                    indicators: true
                }
            );
        });
    </script>
</head>
  
<body>
    <div class="carousel carousel-slider center">
        <div class="carousel-item pink" href="#one!">
            <h2>First Panel</h2>
            <img src=
        </div>
  
        <div class="carousel-item blue" href="#two!">
            <h2>Second Panel</h2>
            <img src=
        </div>
  
        <div class="carousel-item grey" href="#three!">
            <h2>Third Panel</h2>
            <img src=
        </div>
  
        <div class="carousel-item yellow" href="#four!">
            <h2>Fourth Panel</h2>
            <img src=
        </div>
    </div>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up

Start Your Coding Journey Now!