Materialize CSS Carousel

Materialize CSS Carousel

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, Materialize CSS carousel.

Step:1 - Add the .carousel class to the carousel container i.e <div class="carousel">

Carousel Container
   	    
    <div class="carousel"></div>  
   

Step:2 - Add the .carousel-item class to the every carousel item element i.e <a class="carousel-item">

Carousel Item
   	    
     <a class="carousel-item"></a>   
   

Step:3 - Initialization the carousel using Javascript or jQuery.

Initialization
   	       
  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

Download
<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>    
Try it yourself

Full Width Carousel

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.

Initialization
   	        
//javascript
  var instance = M.Carousel.init({
    fullWidth: true
  });
// Or with jQuery
  $('.carousel.carousel-slider').carousel({
    fullWidth: true
  });
   

Source Code

Download
<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>    
Try it yourself

Carousel With Fixed Content

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.

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

Source Code

Download
<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>    
Try it yourself

Web Tutorials

Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS