Carousel using Materialize CSS - GeeksforGeeks

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="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">    <meta name="viewport" content="width=device-width, initial-scale=1.0" />      <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js">    </script>      <!-- Compiled and minified JavaScript -->    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js">    </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="https://www.geeksforgeeks.org/how-to-create-responsive-image-gallery-using-html-css-jquery-and-bootstrap/">                <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200130114641/responsivegallary1.png">            </a>            <h4>Responsive image gallery</h4>        </div>                  <div class="carousel-item">            <a href="https://www.geeksforgeeks.org/how-to-create-a-tab-image-gallery/">                <img src="https://media.geeksforgeeks.org/wp-content/uploads/20191205124138/5510.png">            </a>            <h4>Tab image gallery</h4>        </div>          <div class="carousel-item">            <a href="https://www.geeksforgeeks.org/html-course-building-header-of-the-website/">                <img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/Screenshot-25-1024x453.png">            </a>            <h4>Building header of a website</h4>        </div>          <div class="carousel-item">            <a href="https://www.geeksforgeeks.org/how-to-design-image-slider-using-jquery/">                <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200214124104/imageslider1.png">            </a>            <h4>image slider</h4>        </div>          <div class="carousel-item">            <a href="https://www.geeksforgeeks.org/how-to-create-image-lightbox-gallery-using-html-css-and-javascript/">                <img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200320161020/Screenshot-from-2020-03-20-16-06-36.png">            </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="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">    <meta name="viewport" content=        "width=device-width, initial-scale=1.0" />      <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js">    </script>      <!-- Compiled and minified JavaScript -->    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js">    </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="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210818182611/Blogathon-2021-Write-From-Home-Contest-By-GeeksforGeeks.png">        </div>          <div class="carousel-item blue" href="#two!">            <h2>Second Panel</h2>            <img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210818192517/Blogathon-2021-Prizes.png">        </div>          <div class="carousel-item grey" href="#three!">            <h2>Third Panel</h2>            <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200921183727/about-carousel.png">        </div>          <div class="carousel-item yellow" href="#four!">            <h2>Fourth Panel</h2>            <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200727190538/Group-4362.png">        </div>    </div></body>  </html>
Output:
CSS-Questions
Materialize-CSS
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript
Convert a string to an integer in JavaScript