Carousel 走马灯

在有限空间内，循环播放同一类型的图片、文字等内容

基础用法

适用广泛的基础用法

默认情况下，鼠标 click 底部的指示器时就会触发切换。 通过设置 trigger 属性为 hover，可以达到 hover 触发的效果

<!-- 你可以通过 [(model)] 来指定一个初始值 -->
<!-- 同时获得所有值变更的推送 -->
<el-carousel height="150px">
  <el-carousel-item *ngFor="let item of ['第一个', '第二个', '第三个']" notes=" ">
    <div class="small">
      <h3>{{item}}</h3>
    </div>
  </el-carousel-item>
</el-carousel>

指示器

可以将指示器的显示位置设置在容器外部

<el-carousel height="300px" indicator-position="outside">
  <el-carousel-item *ngFor="let item of ['第一个', '第二个', '第三个']" notes=" ">
    <h3>{{item}}</h3>
  </el-carousel-item>
</el-carousel>

切换箭头

可以设置切换箭头的总是显示

箭头或指示器的触发方式可以更改，详见文末属性参考。

<el-carousel height="150px" arrow="always">
  <el-carousel-item *ngFor="let item of ['第一个', '第二个', '第三个']" notes=" ">
    <div class="small">
      <h3>{{item}}</h3>
    </div>
  </el-carousel-item>
</el-carousel>

标签

为指示器增加额外文本

为了保证样式，存在任何一个 label 属性 为空或未设置，指示器都会隐藏所有标签。

<el-carousel height="150px">
  <el-carousel-item *ngFor="let item of ['第一个', '第二个', '第三个']; let i = index"
    [label]="'label' + i">
    <div class="small">
      <h3>{{item}}</h3>
    </div>
  </el-carousel-item>
</el-carousel>

Carousel Attributes

Carousel Item Attributes