Materialize CSS carousel is generally used to make a slider that slides images, and content in a definite time interval. It is also touch-enabled & provides a smooth experience on the mobile.
Note: This is also touch-compatible! Try swiping with your finger to scroll through the carousel.
Follow the followings steps to create, a Materialize carousels:.
Step:1 -
Add the .carousel
class to the carousel container i.e <div class="carousel">
<div class="carousel"></div>
Step:2 -
Add the .carousel-item
class to the every carousel item element i.e <a class="carousel-item">
<a class="carousel-item"></a>
Step:3 - Initialization the carousel using Javascript or jQuery.
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.carousel');
var instances = M.Carousel.init(elems, options);
});
// Or with jQuery
$(document).ready(function(){
$('.carousel').carousel();
});
Source Code
<div class="carousel grey lighten-5">
<a class="carousel-item" href="#">
<img src="../code-support/images/slider/bird.jpg" />
</a>
<a class="carousel-item" href="#">
<img src="../code-support/images/slider/lily.jpg" />
</a>
<a class="carousel-item" href="#">
<img src="../code-support/images/slider/rose.jpg" />
</a>
<a class="carousel-item" href="#">
<img src="../code-support/images/slider/water-lily.jpg" />
</a>
<a class="carousel-item" href="#">
<img src="../code-support/images/slider/rose-flower.jpg" />
</a>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.carousel').carousel();
});
</script>
To create a full-width carousel, simply assign an alternative .carousel-slider
class followed by
a .carousel
class to the carousel container and also add fullWidth: true
properties inside Javascript or jQuery initialization.
To initialize Materialized CSS full-width carousel, use the following jQuery code.
//javascript
var instance = M.Carousel.init({
fullWidth: true
});
// Or with jQuery
$('.carousel.carousel-slider').carousel({
fullWidth: true
});
Source Code
<div class="carousel carousel-slider grey lighten-5">
<a class="carousel-item" href="#">
<img src="../code-support/images/slider/bird.jpg" />
</a>
<a class="carousel-item" href="#">
<img src="../code-support/images/slider/lily.jpg" />
</a>
<a class="carousel-item" href="#">
<img src="../code-support/images/slider/rose.jpg" />
</a>
<a class="carousel-item" href="#">
<img src="../code-support/images/slider/water-lily.jpg" />
</a>
<a class="carousel-item" href="#">
<img src="../code-support/images/slider/rose-flower.jpg" />
</a>
</div>
You can also add fixed items such as button
inside the carousel. To add a fixed item, simply place the button inside the container and assign the .carousel-fixed-item
class to the container.
To initialize Materialize CSS full-width carousel with content slider, use following jQuery code.
$('.carousel.carousel-slider').carousel({
fullWidth: true,
indicators: true
});
Source Code
<div class="carousel carousel-slider center">
<div class="carousel-fixed-item center">
<a class="btn waves-effect white grey-text darken-text-2">button</a>
</div>
<div class="carousel-item red white-text" href="#one!">
<h2>First Panel</h2>
<p class="white-text">This is your first panel</p>
</div>
<div class="carousel-item amber white-text" href="#two!">
<h2>Second Panel</h2>
<p class="white-text">This is your second panel</p>
</div>
<div class="carousel-item green white-text" href="#three!">
<h2>Third Panel</h2>
<p class="white-text">This is your third panel</p>
</div>
<div class="carousel-item blue white-text" href="#four!">
<h2>Fourth Panel</h2>
<p class="white-text">This is your fourth panel</p>
</div>
</div>