materialize css 滑块不工作，显示灰色背景

Question

大家好，我的网站正在使用 materialize css。当我插入滑块代码时，它只显示灰色背景。这是我的代码：

<div class="slider">
<ul class="slides">
  <li>
    <img src="http://lorempixel.com/580/250/nature/1"> <!-- random image -->
    <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="http://lorempixel.com/580/250/nature/2"> <!-- random image -->
    <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="http://lorempixel.com/580/250/nature/3"> <!-- random image -->
    <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="http://lorempixel.com/580/250/nature/4"> <!-- random image -->
    <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>

Answer 1

您需要通过调用 slider() 来初始化滑块

$(document).ready(function () {
    // Plugin initialization
    $('.slider').slider();
})

您还需要materialize.js

查看 this JSFiddle。

Answer 2

首先你需要materialize.js插件。然后，您必须将以下 javascript 代码插入到您的 .html 文件或 .js 文件中。

$(document).ready(function () {
   $('.slider').slider();
})

materialize css 滑块不工作，显示灰色背景

materialize css slider not working, showing grey background

html

javascript

css

jquery

materialize