Materialize 1.0.0版本Carousel组件无法显示问题求助

Hey there, I’ve run into this exact issue with Materialize 1.0.0’s carousel before—blank screens almost always boil down to missing setup steps or incomplete code. Let’s walk through the most likely fixes:

1. You Forgot to Initialize the Carousel with JavaScript #

Materialize 1.0.0 requires explicit JavaScript initialization for most components, and the carousel is no exception. Skip this step, and the component won’t render at all.

Add this script right before your closing </body> tag (make sure jQuery is loaded first):

document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.carousel');
  var instances = M.Carousel.init(elems, {
    fullWidth: true, // Required if using the `carousel-slider` class
    indicators: true // Optional, adds slide navigation dots
  });
});

If you prefer jQuery:

$(document).ready(function(){
  $('.carousel.carousel-slider').carousel({
    fullWidth: true
  });
});

2. Check Your Dependency Order & Loading #

Materialize relies on jQuery, so your script tags must follow this exact order to work:

• First, jQuery (version 3.x is best paired with Materialize 1.0.0)
• Then, Materialize’s JavaScript file
• Finally, your custom initialization script

Example of correct placement:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="path/to/materialize.min.js"></script>
<script>
  // Your carousel initialization code here
</script>

3. Complete Your HTML Structure #

The code you shared is incomplete—carousel items need actual content to display, and missing closing tags can break rendering. Here’s a full working example based on your snippet:

<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 Slide</h2>
    <p class="white-text">This is your first slide’s content</p>
  </div>
  <div class="carousel-item blue white-text" href="#two!">
    <h2>Second Slide</h2>
    <p class="white-text">This is your second slide’s content</p>
  </div>
  <div class="carousel-item green white-text" href="#three!">
    <h2>Third Slide</h2>
    <p class="white-text">This is your third slide’s content</p>
  </div>
</div>

4. Verify CSS & JS Files Are Loading Properly #

Open your browser’s developer tools (F12) and check the Network tab to make sure Materialize’s CSS and JS files load without 404 errors. If using a CDN, double-check the URL for typos.

Quick Troubleshooting Hack #

If the carousel still won’t show, check the browser’s Console tab for errors. It’ll tell you if jQuery is missing, if there’s a syntax mistake in your initialization code, or if Materialize failed to load entirely.

内容的提问来源于stack exchange，提问作者Nikko Tongoy