Materialize CSS Carousel

Materialized CSS carousel provides an easy way to make an image slider. It is also touch-enabled, which gives a smooth experience when we use it on mobile.

Note : This is also touch compatible! Try swiping with your finger to scroll through the carousel.

Follow the given below steps to create a materialize slider or materialize 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 items 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

          <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>
        
Try it now

Full Width Slider

The carousel has a full-width option that makes it into a simple and elegant image carousel.

jQuery Script For Full With Carousel Initialization

To initialize materialize css full-width carousel, use following jQuery code.

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

Source Code

          <div class="carousel carousel-slider">
  <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 now

Carousel With Content

The materialized CSS supports image as well as allows us to make content carousels. You can also add fixed items such as buttons to your carousel by adding a div with the .carousel-fixed-item class and adding your fixed content in there.

To initialize materialize CSS full-width carousel with content slider, use the following jQuery code.

Initialization
  
    $('.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>
        
Try it now

Web Tutorials

Materialize CSS Carousel
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4