Materialize-css 轮播

Materialize-css是一个基于Google Material Design的现代响应式前端框架。它包含了许多常用的UI组件，其中包括轮播组件。

使用

在HTML页面中引入相关的CSS和JS文件。

<!-- Materialize-css CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Materialize-css JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

接着，需要定义轮播组件的HTML结构：

<div class="slider">
  <ul class="slides">
    <li>
      <img src="https://lorempixel.com/580/250/nature/1"> <!-- slider image 1 -->
      <div class="caption center-align">
        <h3>This is our big Tagline!</h3>
        <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
      </div>
    </li>
    <li>
      <img src="https://lorempixel.com/580/250/nature/2"> <!-- slider image 2 -->
      <div class="caption left-align">
        <h3>Left Aligned Caption</h3>
        <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
      </div>
    </li>
    <li>
      <img src="https://lorempixel.com/580/250/nature/3"> <!-- slider image 3 -->
      <div class="caption right-align">
        <h3>Right Aligned Caption</h3>
        <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
      </div>
    </li>
    <li>
      <img src="https://lorempixel.com/580/250/nature/4"> <!-- slider image 4 -->
      <div class="caption center-align">
        <h3>This is our big Tagline!</h3>
        <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
      </div>
    </li>
  </ul>
</div>

最后，在JavaScript中调用轮播组件：

document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.slider');
  var instances = M.Slider.init(elems, options);
});

其中，options是轮播组件的配置选项，可以按需修改。常用的选项包括indicators、height和duration等。

特点

Materialize-css轮播组件的特点包括：

• 响应式设计，适用于各种设备；
• 可自定义轮播图片和对应的标题和描述；
• 支持轮播图标和自动轮播。

效果预览

参考资料

• Materialize-css官方文档
• 实现 Materialize-css 轮播