我们的轮播组件式稳定的多功能的，他可以是图片滑块，轮播组件项，初次体验。他可以使你在手机很便利的使用。

注意:这个组件支持触摸，同过手指滚动这个组件。

  <div class="carousel">
    <a class="carousel-item" href="#one!"><img src="/images/nature/lorempixel1.jpg"></a>
    <a class="carousel-item" href="#two!"><img src="/images/nature/lorempixel2.jpg"></a>
    <a class="carousel-item" href="#three!"><img src="/images/nature/lorempixel3.jpg"></a>
    <a class="carousel-item" href="#four!"><img src="/images/nature/lorempixel4.jpg"></a>
    <a class="carousel-item" href="#five!"><img src="/images/nature/lorempixel5.jpg"></a>
  </div>
      

初始化

  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.carousel');
    var instances = M.Carousel.init(elems, options);
  });

  //或使用jQuery

  $(document).ready(function(){
    $('.carousel').carousel();
  });
      

选项

名称	类型	默认	描述
duration	Number	200	过渡持续时间（毫秒）。
dist	Number	-100	透视缩放。如果为0，则所有项目的大小都相同。
shift	Number	0	设置中间项的间距
padding	Number	0	设置非中心项之间的填充大小。
numVisible	Number	5	设置可见项的数量。
fullWidth	Boolean	false	像第二个例子一样，将转盘做成全屏滑东。
indicators	Boolean	false	设置为true以显示指示器。
noWrap	Boolean	false	不要在各项之间来回走动。
onCycleTo	Function	null	当轮播项循环到时的回调。

方法

因为jQuery不再是一个依赖项，所以所有的方法都是在插件实例上调用的。你可以这样得到插件的实例：

  var instance = M.Carousel.getInstance(elem);

  /* jQuery方法调用
      您仍然可以使用旧的jQuery插件方法调用。
      但您将无法访问实例属性。

    $('.carousel').carousel('方法名称');
    $('.carousel').carousel('方法名称', 参数名称);
  */
        

.next();

将轮播移动到下一个轮播项或向前移动给定数量的轮播项。

参数

Integer (optional):滑动多少次轮播项

instance.next();
instance.next(3); // 向下移动多少次
      

.prev();

将轮播移动到上一个轮播项或向上移动给定数量的轮播项。

参数

Integer (optional): 滑动多少次轮播项

instance.prev();
instance.prev(3); // 向上移动多少次
      

.set();

将轮播移动到第n个轮播项

参数

Integer: 轮播项的索引

instance.set();
instance.set(3); // 指定第几个轮播项
      

.destroy();

销毁插件实例并回收。

instance.destroy();
      

属性

名称	类型	描述
el	Element	插件初始化时使用的DOM元素。
options	Object	初始化实例时使用的选项。
pressed	Boolean	是否正在单击或轻敲轮播
dragged	Boolean	是否正在拖动轮播
center	Number	中心轮播项的索引

全屏轮播

我们的轮播组件有全宽度选项，让它变成一个简单而优雅的图片轮播，你也可以选择是否显示滑块的底部指标。

注意:这个组件支持触摸，同过手指滚动这个组件。

  <div class="carousel carousel-slider">
    <a class="carousel-item" href="#one!"><img src="/images/food/lorempixel1.jpg"></a>
    <a class="carousel-item" href="#two!"><img src="/images/food/lorempixel2.jpg"></a>
    <a class="carousel-item" href="#three!"><img src="/images/food/lorempixel3.jpg"></a>
    <a class="carousel-item" href="#four!"><img src="/images/food/lorempixel4.jpg"></a>
  </div>
        

  var instance = M.Carousel.init({
    fullWidth: true
  });

  //使用jQuery

  $('.carousel.carousel-slider').carousel({
    fullWidth: true
  });
        

特殊选项

这个轮播组件不仅仅支持图片轮播，而且还支持内容轮播。你可以增加固定项目到你的轮播组件中通过增加一个带 carousel-fixed-item类的div，同时增加内容到div里面。

注意:这个组件支持触摸，同过手指滚动这个组件。

  <div class="carousel carousel-slider center">
    <div class="carousel-fixed-item center">
      <a class="btn waves-effect white grey-text darken-text-2">按钮</a>
    </div>
    <div class="carousel-item red white-text" href="#one!">
      <h2>第一个面板</h2>
      <p class="white-text">这是第一个面板</p>
    </div>
    <div class="carousel-item amber white-text" href="#two!">
      <h2>第二个面板</h2>
      <p class="white-text">这是第二个面板</p>
    </div>
    <div class="carousel-item green white-text" href="#three!">
      <h2>第三个面板</h2>
      <p class="white-text">这是第三个面板</p>
    </div>
    <div class="carousel-item blue white-text" href="#four!">
      <h2>第四个面板</h2>
      <p class="white-text">这是第四个面板</p>
    </div>
  </div>
        

  var instance = M.Carousel.init({
    fullWidth: true,
    indicators: true
  });

  //使用jQuery

  $('.carousel.carousel-slider').carousel({
    fullWidth: true,
    indicators: true
  });