Materialise CSS轮播 _MaterializeCSS

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>

立即测试
【Materialise CSS轮播】输出