我们的轮播是一个强大而多功能的组件，可以作为图像滑块、项目轮播，甚至入职体验。它支持触控，在移动设备上使用时特别流畅。

注意：它也兼容触控！尝试用手指滑动以滚动轮播。

  <div class="carousel">
    <a class="carousel-item" href="#one!"><img src="https://lorempixel.com/250/250/nature/1"></a>
    <a class="carousel-item" href="#two!"><img src="https://lorempixel.com/250/250/nature/2"></a>
    <a class="carousel-item" href="#three!"><img src="https://lorempixel.com/250/250/nature/3"></a>
    <a class="carousel-item" href="#four!"><img src="https://lorempixel.com/250/250/nature/4"></a>
    <a class="carousel-item" href="#five!"><img src="https://lorempixel.com/250/250/nature/5"></a>
  </div>
      

初始化

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

  // Or with jQuery

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

选项

名称	类型	默认值	描述
duration	数字	200	过渡持续时间（毫秒）。
dist	数字	-100	透视缩放。如果为 0，则所有项目大小相同。
shift	数字	0	设置中心项目间距。
padding	数字	0	设置非中心项目之间的间距。
numVisible	数字	5	设置可见项目数量。
fullWidth	布尔值	false	使轮播成为全宽滑块，如第二个示例。
indicators	布尔值	false	设置为 true 以显示指示器。
noWrap	布尔值	false	不循环滚动项目。
onCycleTo	函数	null	循环到新幻灯片时的回调。

方法

由于 jQuery 不再是依赖项，因此所有方法都在插件实例上调用。你可以这样获取插件实例

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

  /* jQuery Method Calls
    You can still use the old jQuery plugin method calls.
    But you won't be able to access instance properties.

    $('.carousel').carousel('methodName');
    $('.carousel').carousel('methodName', paramName);
  */
        

.next();

将轮播切换到下一张幻灯片或向前切换指定数量的幻灯片。

参数

整数（可选）：轮播幻灯片的次数。

instance.next();
instance.next(3); // Move next n times.
      

.prev();

将轮播切换到上一张幻灯片或向后切换指定数量的幻灯片。

参数

整数（可选）：轮播幻灯片的次数。

instance.prev();
instance.prev(3); // Move previous n times.
      

.set();

将轮播切换到第 n 张幻灯片

参数

整数：幻灯片的索引。

instance.set();
instance.set(3); // Set to nth slide.
      

.destroy();

销毁插件实例并进行清理

instance.destroy();
      

属性

名称	类型	描述
el	元素	用于初始化插件的 DOM 元素。
options	对象	用于初始化实例的选项。
pressed	布尔值	如果轮播正在被单击或轻触。
dragged	布尔值	如果轮播当前正在被拖动。
center	数字	中心轮播项的索引。

全宽滑块

我们的轮播有一个全宽选项，可将其变成一个简单而优雅的图片轮播。您还可以让指示器显示在滑块的底部。

注意：它也兼容触控！尝试用手指滑动以滚动轮播。

  <div class="carousel carousel-slider">
    <a class="carousel-item" href="#one!"><img src="https://lorempixel.com/800/400/food/1"></a>
    <a class="carousel-item" href="#two!"><img src="https://lorempixel.com/800/400/food/2"></a>
    <a class="carousel-item" href="#three!"><img src="https://lorempixel.com/800/400/food/3"></a>
    <a class="carousel-item" href="#four!"><img src="https://lorempixel.com/800/400/food/4"></a>
  </div>
        

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

  // Or with jQuery

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

特殊选项

轮播不仅支持图片，还允许您制作内容轮播。您可以通过添加一个带有类 carousel-fixed-item 的 div 并将您的固定内容添加到其中，将固定项添加到轮播中。

注意：它也兼容触控！尝试用手指滑动以滚动轮播。

  <div class="carousel carousel-slider center">
    <div class="carousel-fixed-item center">
      <a class="btn waves-effect white grey-text darken-text-2">button</a>
    </div>
    <div class="carousel-item red white-text" href="#one!">
      <h2>First Panel</h2>
      <p class="white-text">This is your first panel</p>
    </div>
    <div class="carousel-item amber white-text" href="#two!">
      <h2>Second Panel</h2>
      <p class="white-text">This is your second panel</p>
    </div>
    <div class="carousel-item green white-text" href="#three!">
      <h2>Third Panel</h2>
      <p class="white-text">This is your third panel</p>
    </div>
    <div class="carousel-item blue white-text" href="#four!">
      <h2>Fourth Panel</h2>
      <p class="white-text">This is your fourth panel</p>
    </div>
  </div>
        

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

  // Or with jQuery

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