如何解决Materialize中原生JS初始化全屏轮播及指示器失败问题？

嘿，这个坑我之前也踩过！你现在的代码有两个关键问题导致配置不生效：

1. M.AutoInit() 已经提前初始化了轮播组件：Materialize的AutoInit会自动扫描页面上所有带Materialize类名的元素并初始化，包括.carousel。当你之后再调用M.Carousel.init()时，它不会覆盖已经初始化过的实例，所以你的配置根本没被应用。
2. 初始化时没有指定目标DOM元素：M.Carousel.init()的第一个参数必须是要初始化的DOM元素（或元素集合），你直接传配置对象是不对的。

下面给你两种可行的解决方案：

方案一：关闭AutoInit，手动初始化 #

这种方式更可控，适合需要自定义配置的场景：

<script>
  // 等待DOM加载完成后再操作
  document.addEventListener('DOMContentLoaded', function() {
    // 获取页面上所有轮播元素
    const carouselElems = document.querySelectorAll('.carousel');
    // 传入元素和配置进行初始化
    const carouselInstances = M.Carousel.init(carouselElems, {
      fullWidth: true,
      indicators: true
    });
  });
</script>

注意：不要同时使用M.AutoInit()，否则会重复初始化导致冲突。

方案二：保留AutoInit，用data属性配置 #

如果你不想放弃AutoInit的便捷性，可以直接在轮播的HTML元素上通过data-*属性传递配置，AutoInit会自动读取这些属性：

<!-- 在轮播容器上添加data属性 -->
<div class="carousel" data-fullwidth="true" data-indicators="true">
  <a class="carousel-item" href="#one!"><img src="image1.jpg"></a>
  <a class="carousel-item" href="#two!"><img src="image2.jpg"></a>
  <a class="carousel-item" href="#three!"><img src="image3.jpg"></a>
</div>

<script>
  // 只需要调用AutoInit即可，它会读取data属性的配置
  M.AutoInit();
</script>

为什么之前jQuery的写法可行？因为jQuery版本的$('.carousel').carousel({...})会直接定位到DOM元素并初始化（或重新初始化），而原生JS的M.Carousel.init()需要明确指定目标元素，且不会覆盖已有的AutoInit实例。

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