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>
<link rel="stylesheet" href=
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="text/javascript"
</script>
<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>
<link rel="stylesheet" href=
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<script type="text/javascript"
</script>
<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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...