2015-11-01 2 views
5

materialcss視差の内側にmaterializecssスライダをネストしたいと思います。これはできますか?視差の中にmaterializecssスライダを入れ子にするにはどうしたらいいですか?

私はそれぞれの作品を個別に細かくすることができますが、それらを入れ子にすると、キャプションが付いた灰色の領域になります。

これは、あなたがこのようにのみスライダを使用することができます

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

おかげ

+0

を仕事でした正常に動作しますか?私も同じことをしようとしています。 – Tom

+0

いいえトム、私はしなかった – user3808307

答えて

3

私のコードです:

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

は、あなたのCSSファイルで

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

これを入れて、それはあなたが今までにこれが可能であるかどうか:)