幻灯片

幻灯片，一般用来轮播一些图片。注意，在 v1.3.0 及以上版本中才可用。

更新 v1.4.0: 此组件的css代码被移入了 sui-append.css 中

通过data属性自动加载

在 .sui-carousel 容器上增加了一个 data-ride="carousel"，则会自动初始化幻灯片。注意，这是在 onload 事件时加载的，所以onload之后异步加载的内容你仍然需要手动初始化。
有两个属性可以用来控制轮播，分别是 data-slide 和 data-slide-to。其中 data-slide 可以设置为 "prev" 或者 "next"，分别表示向上一个和下一个滚动。 data-slide-to 可以设置为一个数字，从0开始，点击之后定位到对应的幻灯片元素。
JS配置项 interval, pause 和 autoStart 可以通过 data-x 属性来在HTML中设置。比如data-interval 可以用来控制轮播间隔时间，单位毫秒，默认是 5000 ; data-pause 可以用来设置暂停的出发动作，默认是 "hover", data-auto-start 可以用来设置是否自动开始播放, 默认为 true。

示例
代码

标题

内容内容内容内容内容内容内容内容内容内容内容内容

标题

内容内容内容内容内容内容内容内容内容内容内容内容

标题

内容内容内容内容内容内容内容内容内容内容内容内容

‹›

<div id="myCarousel" data-ride="carousel" data-interval="4000" class="sui-carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="active item"><img src="assets/imgs/carousel-1.jpg">
      <div class="carousel-caption">
        <h4>标题</h4>
        <p>内容内容内容内容内容内容内容内容内容内容内容内容</p>
      </div>
    </div>
    <div class="item"><img src="assets/imgs/carousel-2.jpg">
      <div class="carousel-caption">
        <h4>标题</h4>
        <p>内容内容内容内容内容内容内容内容内容内容内容内容</p>
      </div>
    </div>
    <div class="item"><img src="assets/imgs/carousel-3.jpg">
      <div class="carousel-caption">
        <h4>标题</h4>
        <p>内容内容内容内容内容内容内容内容内容内容内容内容</p>
      </div>
    </div>
  </div><a href="#myCarousel" data-slide="prev" class="carousel-control left">‹</a><a href="#myCarousel" data-slide="next" class="carousel-control right">›</a>
</div>

复制代码

代码已复制

通过JS控制

如果你没有使用 data-ride 自动加载，则可以使用 $('.sui-carousel').carousel(config) 来通过JS初始化。

初始化配置

初始化的时候你可以传入一个配置对象，有两个参数 interval 和 pause 可以配置，和 data-x 中的配置是对应的。如下所示

interval: 轮播间隔，默认是 5000 毫秒
pause: 触发暂停的事件，默认是 "hover"
autoStart: 是否自动开始播放

可用方法

有如下方法可以调用：

.carousel('cycle'): 开始轮播
.carousel('pause'): 暂停轮播
.carousel(number): 从0开始，定位到某一张幻灯片。
.carousel('prev'): 上一个
.carousel('next'): 下一个

示例
代码

标题

内容内容内容内容内容内容内容内容内容内容内容内容

标题

内容内容内容内容内容内容内容内容内容内容内容内容

标题

内容内容内容内容内容内容内容内容内容内容内容内容

‹›

<div id="myCarousel2" class="sui-carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel2" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel2" data-slide-to="1"></li>
    <li data-target="#myCarousel2" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="active item"><img src="assets/imgs/carousel-1.jpg">
      <div class="carousel-caption">
        <h4>标题</h4>
        <p>内容内容内容内容内容内容内容内容内容内容内容内容</p>
      </div>
    </div>
    <div class="item"><img src="assets/imgs/carousel-2.jpg">
      <div class="carousel-caption">
        <h4>标题</h4>
        <p>内容内容内容内容内容内容内容内容内容内容内容内容</p>
      </div>
    </div>
    <div class="item"><img src="assets/imgs/carousel-3.jpg">
      <div class="carousel-caption">
        <h4>标题</h4>
        <p>内容内容内容内容内容内容内容内容内容内容内容内容</p>
      </div>
    </div>
  </div><a href="#myCarousel2" data-slide="prev" class="carousel-control left">‹</a><a href="#myCarousel2" data-slide="next" class="carousel-control right">›</a>
</div>
<div class="sui-btn-group">
  <button id="btn-cycle" class="sui-btn btn-bordered btn-primary">播放</button>
  <button id="btn-pause" class="sui-btn btn-bordered btn-primary">暂停</button>
  <button id="btn-slide2" class="sui-btn btn-bordered btn-primary">定位到第2张</button>
  <button id="btn-slide-prev" class="sui-btn btn-bordered btn-primary">上一个</button>
  <button id="btn-slide-next" class="sui-btn btn-bordered btn-primary">下一个</button>
</div>
<script>
  var $carousel = $("#myCarousel2").carousel({
    interval: 2000
  });
  
  $("#btn-cycle").click(function() {
    $carousel.carousel('cycle');
  });
  $("#btn-pause").click(function() {
    $carousel.carousel('pause');
  });
  $("#btn-slide2").click(function() {
    $carousel.carousel(1);
  });
  $("#btn-slide-prev").click(function() {
    $carousel.carousel('prev');
  });
  $("#btn-slide-next").click(function() {
    $carousel.carousel('next');
  });
  
  
</script>

复制代码

代码已复制

开发者文档

通过data属性自动加载

标题

标题

标题

通过JS控制

初始化配置

可用方法

标题

标题

标题