如何在视差内嵌套materializecss滑块? [英] How can I nest materializecss slider within a parallax?

问题描述

我想在 materialcss 视差中嵌套一个 materializecss 滑块.能做到吗?

I would like to nest a materializecss slider inside a materialcss parallax. Can this be done?

我可以单独完成每个工作，但是当我将它们嵌套时，只会出现带有标题的灰色区域.

I can make each work individually fine, but when I nest them I just get a grey area with the captions.

这是我的代码

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

谢谢

推荐答案

您只能使用这样的滑块:

you can use only slider like this:

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

then put this in your css file

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

它会正常工作:)

这篇关于如何在视差内嵌套materializecss滑块?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！