介绍

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

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

  <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>
      

jQuery 初始化

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

jQuery 插件选项

选项名称	描述
time_constant	转换时间(默认: 200)
dist	缩放， 如过是0，所有的子项都是相同的尺寸 (默认: -100)
shift	设置中间项的空隙。(默认: 0)
padding	设定非中间项的内补白。(默认: 0)
full_width	设置全宽度滑动，例如第二个例子。(默认: false)
indicators	设置是否显示指标。(默认: false)
no_wrap	不循环播放子项目。(默认: false)

jQuery 插件方法

我们有中止的方法，启动，移动到下一幕和上一幕的方法。

// Next slide
$('.carousel').carousel('next');
$('.carousel').carousel('next', 3); // Move next n times.
// Previous slide
$('.carousel').carousel('prev');
$('.carousel').carousel('prev', 4); // Move prev n times.
// Set to nth slide
$('.carousel').carousel('set', 4);
      

全宽度滑块

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

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

  <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>
        

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

特殊选项

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

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

  <div class="carousel carousel-slider center" data-indicators="true">
    <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>
        

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