html - 如何在视差内嵌套 materializecss slider ?

标签 html css slideshow parallax materialize

我想在 materialcss 视差中嵌套一个 materializecss slider 。这能做到吗?

我可以单独制作每个作品,但是当我嵌套它们时,我只会得到一个带有标题的灰色区域。

这是我的代码

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

谢谢

最佳答案

你只能像这样使用 slider :

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

它会很好地工作:)

关于html - 如何在视差内嵌套 materializecss slider ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33459124/

相关文章:

使用 X-Sendfile 的 PHP 文件服务

html - html5 链接预取会影响 Google Analytics 吗?

CSS 转换不适用于内联元素

javascript - 尝试用时间间隔更新幻灯片

jquery - 当通过 jQuery 分配最大高度时,图像不会在页面加载时显示

javascript - 将 'active' 类添加到幻灯片导航

html - 即使添加了图标也不会出现在小界面中

javascript - 位置相对绝对子 margin 错误?

jquery - CSS3 动画填充模式 : forwards

css - 下一个 div 的边距不适用于 float 在 div 上方