Materialize轮播图的实现

person 前端初学者    watch_later 2024-04-13 12:39:22
visibility 948    class Materialize,轮播    bookmark 专栏

背景


在使用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)
});


评论区
评论列表
menu