Html 物化滑块-如何包含4个以上的图像？

我使用的是materialize的图像滑块，问题是如果我有超过（预定义的）4个图像，那么第5个etc将放置在滑块之外。如果materialize html代码不包含任何点，如何添加图像和相应的点。。 另外，如何向图像添加文本？问题是，我不知道如何设置样式或添加内容，因为materialize中的html不包含太多内容。因此，根据显示的图像，应该显示相应的文本。我在谷歌上搜索了这么多，但找不到任何答案。 谢谢

这就是具体化代码：

html

---

每张幻灯片都定义为无序列表中的列表项。因此，您只需将另一个

添加到您的

不，这就是我所做的-问题是，如果我添加一个

，图像不会显示在滑块上-这就是为什么我要问的原因。@javascripting你看过我发布的示例链接了吗？哦，我错过了。是的，谢谢你的作品。我所做的实际上只是添加了第五个

，但没有任何效果……太奇怪了！只需继续添加更多这些

…

和

标签。您可能错误地将其添加到

外部，这可能是它显示在外部的原因

<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>
  </div>

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