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

materialize css slider not working, showing grey background

本文关键字：显示 灰色 背景 工作 css 实体化      更新时间：2023-09-26

嘿，伙计们正在为我的网站使用实体化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>

您需要通过调用slider（）来初始化滑块

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

你还需要物化.js

看看这个JSFiddle。

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

$(document).ready(function () {
   $('.slider').slider();
})
相关文章：