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

📌 相关文章

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

📅 最后修改于: 2023-12-03 15:30:32.779000 🧑 作者: Mango

使用M.Slider来创建幻灯片

如果你想要在你的网站上添加一个幻灯片，M.Slider是一个非常好的选择。它是Materialize框架提供的组件，简单易用，可以帮助你快速创建一个漂亮的幻灯片展示。

引入M.Slider

为了使用M.Slider，你首先需要引入Materialize框架。你可以从官网下载，也可以通过CDN引入。在你的HTML文件中添加以下代码片段：

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- 导入CSS文件 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <!-- 导入JS文件 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
  <!-- 在这里添加你的内容 -->
</body>
</html>

创建Slider

在你的HTML文件中，你可以创建一个幻灯片容器。幻灯片的每一个元素应该被包含在<li>中。创建一个简单的幻灯片，你可以按照以下方式添加HTML代码：

<div class="slider">
  <ul class="slides">
    <li>
      <img src="https://lorempixel.com/580/250/nature/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">
      <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">
      <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">
      <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>

初始化Slider

一旦你的HTML代码完成，你需要实例化M.Slider来完成幻灯片的初始化。可以在DOM加载完成时调用init方法：

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

在上面的代码中，elems是一个nodelist，包含所有幻灯片元素。options是一个对象，可以用来设置幻灯片的选项，如：

var options = {
  indicators: true, // 显示进度条
  duration: 500,    // 图片切换时间
  interval: 2000    // 幻灯片停留时间
}

至此，你已经成功地创建了一个功能完善的幻灯片。

有关更多选项和用法，请参阅M.Slider官方文档。