Question

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

这是物化代码：

HTML

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

jQuery的：

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

Answer 1

每张幻灯片都被定义为无序列表中的列表项。因此，您只需向<li></li>添加另一个<ul></ul>即可。 Example

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

1 个答案: