在使用Vue开发时,我们不希望引入JQuery,引入JQuery会加大前端资源大小,我们可以不使用JQuery来使用Materializecss框架
<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>
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) });