Materialize CSS Carousel and Slider: Complete Guide

Quick answer: Materialize ships two image components. The carousel is a rotating set of cards with prev/next controls, built from a div.carousel containing div.carousel-item elements and initialized with M.Carousel.init(). The slider is a full-width banner that fills the viewport, built from a ul.slider with li slides and initialized with M.Slider.init(). Both are JavaScript components — nothing moves until you initialize them, which is the mistake behind the vast majority of frozen carousels.

Carousel in 3 steps

Markup first, then initialization. Each item is a card-like block, so the visual options are the same ones you use on Materialize cards.

<!-- Step 1: the carousel -->
<div class="carousel">
  <a class="carousel-item" href="#one!"><img src="slide1.jpg"></a>
  <a class="carousel-item" href="#two!"><img src="slide2.jpg"></a>
  <a class="carousel-item" href="#three!"><img src="slide3.jpg"></a>
</div>

<!-- Step 2: initialization -->
<script>
  document.addEventListener('DOMContentLoaded', function () {
    var elems = document.querySelectorAll('.carousel');
    M.Carousel.init(elems, {
      fullWidth: false,
      indicators: true
    });
  });
</script>

Set fullWidth: true and the focused item expands to the full container width while the neighbours peek in at a reduced scale — the pattern most landing pages use. The indicators option adds the row of dots under the carousel.

Carousel options that matter

M.Carousel.init(document.querySelectorAll('.carousel'), {
  fullWidth: true,
  indicators: true,
  numVisible: 3,
  onCycleTo: function (item, dragged) {
    console.log('now showing', item);
  }
});

Controlling the carousel from JavaScript

For arrows, thumbnails or autoplay you drive the instance directly rather than waiting for a click or swipe:

var c = M.Carousel.getInstance(document.querySelector('.carousel'));
c.next();
c.prev();
c.set(2);        // jump to the third item (zero-indexed)
setInterval(function () { c.next(); }, 4000);

The set() method is what gallery thumbnails call to jump straight to an image, and the interval above is the simplest autoplay. A production-ready autoplay banner that pauses on hover is documented in the full-width autoplay slider guide.

Slider vs carousel: which one to use

The slider component is a fullscreen banner, not a card rack. Reach for it when you want one image at a time with optional captions and a fixed height.

<ul class="slider">
  <li><img src="banner1.jpg"></li>
  <li><img src="banner2.jpg"></li>
</ul>

M.Slider.init(document.querySelectorAll('.slider'), {
  height: 480,
  interval: 7000
});

Rule of thumb: use the slider for a single hero banner at the top of a page, and the carousel for browsing a set of images or cards inside the page. The responsive sizing both rely on comes from the Materialize grid system.

When the carousel does not move: four checks

• No initialization. Markup without M.Carousel.init() is a static row of images on 1.0.0.
• Wrong item class. Items must be carousel-item (singular). A plural class or a plain div is ignored.
• Images not sized. Carousel items need explicit image dimensions; oversized images blow the layout out of the container.
• Old 0.97.x API. The removed jQuery initialization from old tutorials does nothing on 1.0.0.

Version mix-ups are the thread running through all of these; the Materialize CSS tutorial shows the correct 1.0.0 imports so the CSS and JavaScript always match.

Working on a gallery or hero banner and want the animation tuned? Ampersand Academy coaches front-end work one-to-one, using your own project as the curriculum.

Frequently asked questions