滑动材料设计卡片视图

问题描述：

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/

答

你可以简单地替换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>

这应该给你你在找什么。请记住初始化滑块。

我试过了，它没有工作，只是一个灰色的框。但是在进一步的探索中，我在尝试一个图像时也得到了一个灰色框。我想我可能会错过别的东西 – Mike

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

当我回到我的电脑时，我会试一试，谢谢。 – Mike

滑动材料设计卡片视图

相关推荐