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();
})

具体化css滑块不工作，显示灰色背景

2 个答案: