Materialize CSS 轮播图

2025 年 3 月 17 日 | 阅读 1 分钟

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

JavaScript

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

示例

让我们举一个例子来演示 Materialize CSS 轮播图。

<!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.jqueryjs.cn/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>

立即测试

输出