个性化阅读
专注于IT技术分析

Materialise CSS轮播

点击下载

Materialize CSS轮播提供了一种强大而通用的方式来制作图像滑块。它也是触摸启用功能, 当我们在移动设备上使用它时可以提供流畅的体验。

的JavaScript

<script>$(document).ready(function(){
      $('.carousel').carousel();
    });</script>

例子

让我们以一个示例来演示Materialise CSS Carousel。

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Cards Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script> 
   </head> 
   <body class = "container"> 
     <div class="slider">
  <ul class="slides">
    <li>
      <img src="http://lorempixel.com/580/250/nature/1">
      <!-- random image -->
      <div class="caption center-align">
        <h3>Post 1</h3>
        <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
      </div>
    </li>
    <li>
      <img src="http://lorempixel.com/580/250/nature/2">
      <!-- random image -->
      <div class="caption center-align">
        <h3>Post 2</h3>
        <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
      </div>
    </li>
    <li>
      <img src="http://lorempixel.com/580/250/nature/3">
      <!-- random image -->
      <<div class="caption center-align">
        <h3>Post 3</h3>
        <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
  <img src="http://lorempixel.com/580/250/nature/4">
  <!-- random image -->
  <d<div class="caption center-align">
    <h3>Post 4</h3>
    <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
    </div>
</li>
</ul>
</div>
<script> $(document).ready(function() {
  $(".slider").slider({ full_width: true });
});
</script>
   </body>   
</html>

立即测试

输出

Materialize轮播1
赞(0)
未经允许不得转载:srcmini » Materialise CSS轮播

评论 抢沙发

评论前必须登录!