如何在视差内嵌套 materializecss 滑块？

Question

我想在 materialcss 视差中嵌套一个 materializecss 滑块。这能做到吗？

我可以让每个作品都很好，但是当我嵌套它们时，我只会得到一个带有标题的灰色区域。

这是我的代码

<div class="parallax-container">
  
<div class="parallax">
       
    <div class="slider">
        <ul class="slides">
         <li>
           <img src="images/new-york-city.jpg">
           <div class="caption center-align brown-text text-darken-2">
              <h3>This is our big Tagline!</h3>
              <h5 class="light grey-text text-darken-2">Here's our small slogan.</h5>
           </div>
         </li>
         
         <li>
           <img src="images/coffee.jpg">
           <div class="caption center-align blue-grey-text text-darken-4">
              <h3>This is our big Tagline!</h3>
              <h5 class="light blue-grey-text text-darken-4">Here's our small slogan.</h5>
           </div>
         </li>      
        </ul><!-- /slides -->
   </div><!-- /slider -->
      
</div><!-- /parallax -->
</div><!-- /parallax-container -->

谢谢

Answer 1

您只能像这样使用滑块：

       
    <div class="slider">
        <ul class="slides">
           <li>
             <img src="images/new-york-city.jpg">
          <div class="caption center-align brown-text text-darken-2">
             <h3>This is our big Tagline!</h3>
             <h5 class="light grey-text text-darken-2">Here's our small slogan.</h5>
          </div>
        </li>
         
        <li>
          <img src="images/coffee.jpg">
          <div class="caption center-align blue-grey-text text-darken-4">
             <h3>This is our big Tagline!</h3>
             <h5 class="light blue-grey-text text-darken-4">Here's our small slogan.</h5>
          </div>
        </li>      
        </ul><!-- /slides -->
   </div><!-- /slider -->

然后将其放入您的 css 文件

.slides li img {
  background-attachment: fixed;
}

它将正常工作:)

如何在视差内嵌套 materializecss 滑块？

How can I nest materializecss slider within a parallax?

html

css

slideshow

parallax

materialize