滑動材料設計卡片視圖

enter image description here

而是堆放了一堆卡像上面的圖片中，我想嘗試，並有一個滑塊當刷卡時顯示下一張卡片。

我的HTML看起來像這樣：

<html lang="en"><head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"> 
    <title>Starter Template - Materialize</title> 

</head> 

<body style=""> 

    <div class="navbar-fixed "> 
     <nav class="orange " role="navigation"> 
      <div id="replaceBar" class="nav-wrapper container"> 
       <a id="logo-container" href="#" class="brand-logo">Statistics</a> 
       <ul class="right hide-on-med-and-down left"> 
        <li><a href="stats.html">Statistics</a></li> 
       </ul> 
       <ul style="left: -250px;" id="nav-mobile" class="side-nav left"> 
        <li><a href="stats.html">Statistics</a></li> 
       </ul> 
       <a href="#" data-activates="nav-mobile" class="button-collapse"><img style="vertical-align: middle;" src="img/menuIcon.png" height="30" width="30"></a> 
       <ul id="search" class="right valign-wrapper"> 
        <li class="valign"> 
         <a href="#"> <img style="vertical-align: middle;" src="img/searchIcon.png" height="30" width="30"></a> 
        </li> 
       </ul> 
      </div> 
     </nav> 

    </div> 




    <div class="row" style="margin:1;"> 
     <div class="col s12 m7"> 
      <div class="card valign-wrapper"> 
       <div class="card-content valign center-block"> 
        <div class="row"> 
         <h3 id="beerCount" class="center-align orange-text text-darken-2">410</h3> 
         <p class="center-align">Beers Tasted</p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

    <div class="row" style="margin:1;"> 
     <div class="col s12 m7"> 
      <div class="card valign-wrapper"> 
       <div class="card-content valign center-block"> 
        <div class="row"> 
         <h3 id="breweryCount" class="center-align orange-text text-darken-2">161</h3> 
         <p class="center-align">Breweries Tried</p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

    <div class="row" style="margin:1;"> 
     <div class="col s12 m7"> 
      <div class="card valign-wrapper"> 
       <div class="card-content valign center-block"> 
        <div class="row"> 
         <h3 id="breweryVisit" class="center-align orange-text text-darken-2">16</h3> 
         <p class="center-align">Breweries Visited</p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 







    <!-- Modal Structure --> 
    <div style="z-index: 1003; display: none; opacity: 0; transform: scaleX(0.7); top: 0px;" id="modal1" class="modal"> 
     <div class="modal-content center"> 
      <div> 
       <span class="card-title">99 bottles of beer on the wall...</span> 
      </div> 
      <div id="load" class="preloader-wrapper big active "> 
       <div class="spinner-layer spinner-yellow-only"> 
        <div class="circle-clipper left"> 
         <div class="circle"></div> 
        </div> 
        <div class="gap-patch"> 
         <div class="circle"></div> 

        </div> 
        <div class="circle-clipper right"> 
         <div class="circle"></div> 
        </div> 
       </div> 
      </div> 
     </div> 

    </div> 




<div style="left: 0px;" class="drag-target"></div><div class="hiddendiv common"></div></body></html>

我試圖將它們添加到與materializecss這是我在用的建立我的web應用程序，但它沒有工作提供了一個滑塊的圖像。

無論如何滑動它們與HTML5和CSS？

這裏是一個小提琴：

https://jsfiddle.net/mjbbc48h/

來源

2015-07-12 Mike

你可以簡單地替換materializecss滑塊的圖像內容與你的卡元素。像這樣：

<div class="slider"> 
<ul class="slides"> 
    <li> 
    <div class="row" style="margin:1;"> 
    <div class="col s12 m7"> 
     <div class="card valign-wrapper"> 
      <div class="card-content valign center-block"> 
       <div class="row"> 
        <h3 id="breweryVisit" class="center-align orange-text text-darken-2">16</h3> 
        <p class="center-align">Breweries Visited</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
    </li> 
    <li> 
    <div class="row" style="margin:1;"> 
    <div class="col s12 m7"> 
     <div class="card valign-wrapper"> 
      <div class="card-content valign center-block"> 
       <div class="row"> 
        <h3 id="beerCount" class="center-align orange-text text-darken-2">410</h3> 
        <p class="center-align">Beers Tasted</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
    </li> 
</ul>

這應該給你你在找什麼。請記住初始化滑塊。

來源

2015-07-12 01:04:35 krillebimbim

我試過了，它沒有工作，只是一個灰色的框。但是在進一步的探索中，我在嘗試一個圖像時也得到了一個灰色框。我想我可能會錯過別的東西 – Mike

請記住初始化插件： $（document）.ready（function（）{（'。slider'）。slider（）; }）; – krillebimbim

當我回到我的電腦時，我會試一試，謝謝。 – Mike

滑動材料設計卡片視圖

回答

相關問題