向滑块中的所有图像添加修复按钮 - Materialise design

Question

我正在 Materializecss 开发一个简单的网站，并在我的应用程序的首页上使用整页滑块。现在我的滑块有多个图像。我想在滑块上放置一个按钮和一个 div，其中包含一些内容，并且需要对所有图像通用。这样做的一种方法是在滑块的所有图像中放置相同的按钮和 div 但这太愚蠢了，所以我想放置一个按钮和 div 对所有页面都是通用的。

<div class="slider fullscreen "> 
   <ul class="slides"> 
     <li> <img src="abcd.jpg"> <!-- random image --> 
        <div class="caption left-align"> 
          <h3>XXXX</h3> 
            <h5 class="light grey-text text-lighten-3">YYYYY</h5> 
              <a class="waves-effect waves-light btn">Click to login further</a>
         </div> 
     </li>  
   <li> <img src="efgh.jpg"> <!-- random image --> 
        <div class="caption right-align"> 
          <h3>XXXX</h3> 
            <h5 class="light grey-text text-lighten-3">DDD</h5> 
              <a class="waves-effect waves-light btn">Click to login further</a>
         </div> 
     </li> 
  </ul> 
</div>

此外，我不知道如何在滑块上添加 div，这对于滑块中的所有图像都是通用的。我试过将下面的代码放在滑块中，但没有用。

<div class = "col s6-mine teal lighten-3 z-depth-3">
   <center><p>Material <br> Its a material design test page</p></center>
</div>
<div class = "col s6-mine teal lighten-3 z-depth-3">
   <center><p>Test<br> Trying putting div</p></center>
</div>

非常感谢任何帮助或指导。

谢谢

Answer 1

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

.buttons-wrapper {
  position: absolute;
  height: calc(100vh);
  margin-top: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 997;
  top: 0;
  pointer-events: none;
  width: 100%;
}
.buttons-wrapper a {
  pointer-events: auto;
}
.mg-rg {
  margin-right: 1rem;
  margin-left: 1rem;
  margin-top: 1rem;
}

<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<div class="slider fullscreen ">
  <ul class="slides">
    <li>
      <img src="http://www.theatercomplex.nl/wp-content/uploads/2013/10/theater-logo-theatercomplexnl.png">
      <!-- random image -->
      <div class="caption left-align">
        <h3>XXXX</h3> 
        <h5 class="light grey-text text-lighten-3">YYYYY</h5> 
      </div>
    </li>
    <li>
      <img src="http://www.directdutch.com/wp-content/uploads/2015/09/table-restaurant.jpg">
      <!-- random image -->
      <div class="caption right-align">
        <h3>XXXX</h3> 
        <h5 class="light grey-text text-lighten-3">DDD</h5> 
      </div>
    </li>
  </ul>
</div>
<div class="buttons-wrapper">
  <div class="row center">
    <a class="waves-effect waves-light btn hoverable mg-rg">Click to login further</a>
  </div>
</div>

这就是您要找的吗？如果不是我可能不明白你想要达到的目标

向滑块中的所有图像添加修复按钮 - Materialise design

Adding fix button to all images in the slider - Materialize design

html

css

materialize