背景

在使用Vue开发时，我们不希望引入JQuery，引入JQuery会加大前端资源大小，我们可以不使用JQuery来使用Materializecss框架

html代码如下：

<div class="carousel carousel-slider center">
    <div class="carousel-fixed-item center">
      <a class="btn waves-effect white grey-text darken-text-2">按钮</a>
    </div>
    <div class="carousel-item red white-text" href="#one!">
      <h2>第一个面板</h2>
      <p class="white-text">这是第一个面板</p>
    </div>
    <div class="carousel-item amber white-text" href="#two!">
      <h2>第二个面板</h2>
      <p class="white-text">这是第二个面板</p>
    </div>
    <div class="carousel-item green white-text" href="#three!">
      <h2>第三个面板</h2>
      <p class="white-text">这是第三个面板</p>
    </div>
    <div class="carousel-item blue white-text" href="#four!">
      <h2>第四个面板</h2>
      <p class="white-text">这是第四个面板</p>
    </div>
</div>

使用js代码初始化

document.addEventListener("DOMContentLoaded", function() {
    const elems = document.querySelectorAll(".carousel")
    var instance = M.Carousel.init(elems, {
      fullWidth: true,
      indicators: true
    });
    // 实现自动轮播效果
    const timer = setInterval(function() {
      instance[0].next();
    }, 4000)
});