免记，图片轮滑插件js及css

jQuery插件 materialize.min.js 包含了图片轮滑的插件slider.js，使用该轮滑插件相比其他同类插件，DOM结构最为简单。但是 materialize.min.js 依赖其框架的css文件 materialize.min.css。而materialize.min.css是一套完整的css框架，会对浏览器元素的默认样式重置，这种重置会对诸如表单、按钮等过度的渲染，口味重，我个人认为这种重置会对页面元素的表现起破坏作用。因此为了配合materialize.min.js的轮滑插件，必须提取materialize.min.css起作用的部分。

CSS文件

/* slider.css */
/* block slider */
.slider {
    position: relative;
    height: 400px;
    width: 100%;
}
.slider .slides {
    background-color: #9e9e9e;
    margin: 0;
    height: 400px;
}
.slider .slides li {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: inherit;
    overflow: hidden;
}
.slider .slides li img {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center;
}
.slider .slides li.active {
    z-index: 2;
}
.slider .indicators {
    position: absolute;
    text-align: center;
    left: 0;
    right: 0;
    bottom: 40px;
    margin: 0;
    z-index: 10;    
}
.slider .indicators .indicator-item {
    display: inline-block;
    position: relative;
    cursor: pointer;
    height: 12px;
    width: 12px;
    margin: 0 12px;
    background-color: #e0e0e0;
    transition: background-color .3s;
    border-radius: 50%;
}
.slider .indicators .indicator-item.active {
    background-color: #4CAF50 !important;
}
/* endblock slider */

在上述slider.css文件中，定义了slider、slides、li、img、active、indicators、indicator-item等样式。

其中幻灯片容器slider的定位为relative，以便将其子元素li、indicators等容器绝对定位，并设置了容器slider的初始大小。这个初始大小是materialize.js的默认值，通过为slider({})提供options，可以改变slider的高度。

注意，容器slider的子容器slides的高度为height-40，height是slider的高度，另外40px是容器indicators的高度，indicators里面的 indicator-item 并排显示，css中是设置了indicator-item的大小和active时的背景颜色。

DOM结构

<!-- html -->
<div class="slider">
  <ul class="slides">
    <li><img src="img/banner.png" alt=""></li>
    <li><img src="img/banner.png" alt=""></li>
    <li><img src="img/banner.png" alt=""></li>
  </ul>
</div>

HTML文件需引用css部分、jquery.js、materialize.js。

JS

// JS
<script>
  $("document").ready(function(){
    $('.slider').slider({height: 140, interval: 5000 });
  });
</script>

非常的简单。

参考materialize jquery-slider

materialize.min.js依赖于jQuery

materialize.min.js下载地址<//qiniu.uqugu.com/dl/js-plugin/materialize.min.js>