cui

Appearance

cuixingjian
1178
5.7m

Carousel 轮播图 ​

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

基础用法 ​

结合使用 c-carousel 和 c-carousel-item 标签就得到了一个轮播图。幻灯片的内容是任意的，需要放在 c-carousel-item 标签中。默认情况下，在鼠标 hover 底部的指示器时会触发切换。通过设置 trigger 属性为 click，可以达到点击触发的效果。

幻灯片 1

幻灯片 2

幻灯片 3

幻灯片 4

vue
<template>
  <c-carousel height="400px">
    <c-carousel-item>
      <div class="carousel-item item-1">
        <h3>幻灯片 1</h3>
      </div>
    </c-carousel-item>
    <c-carousel-item>
      <div class="carousel-item item-2">
        <h3>幻灯片 2</h3>
      </div>
    </c-carousel-item>
    <c-carousel-item>
      <div class="carousel-item item-3">
        <h3>幻灯片 3</h3>
      </div>
    </c-carousel-item>
    <c-carousel-item>
      <div class="carousel-item item-4">
        <h3>幻灯片 4</h3>
      </div>
    </c-carousel-item>
  </c-carousel>
</template>

<style>
.carousel-item {
  height: 100%;
  wiidth: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  border: 10px solid red;
}

.item-1 {
  background: linear-gradient(45deg, #ff6b6b, #ee5a24);
}

.item-2 {
  background: linear-gradient(45deg, #4ecdc4, #44a08d);
}

.item-3 {
  background: linear-gradient(45deg, #45b7d1, #96c93d);
}

.item-4 {
  background: linear-gradient(45deg, #f093fb, #f5576c);
}
</style>

指示器 ​

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

indicator-position 属性定义了指示器的位置。默认情况下，它会显示在轮播图内部，设置为 outside 则会显示在外部；设置为 none 则不会显示指示器。

vue
<template>
  <c-carousel height="300px" indicator-position="outside">
    <c-carousel-item>
      <div class="carousel-item" style="background: #409eff;">
        <h3>外部指示器 1</h3>
      </div>
    </c-carousel-item>
    <c-carousel-item>
      <div class="carousel-item" style="background: #67c23a;">
        <h3>外部指示器 2</h3>
      </div>
    </c-carousel-item>
    <c-carousel-item>
      <div class="carousel-item" style="background: #e6a23c;">
        <h3>外部指示器 3</h3>
      </div>
    </c-carousel-item>
  </c-carousel>
</template>

<style>
.carousel-item {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
}
</style>

切换箭头 ​

可以设置切换箭头的显示时机

arrow 属性定义了切换箭头的显示时机。默认情况下，切换箭头只有在鼠标 hover 到轮播图上时才会显示；若将 arrow 设置为 always，则会一直显示；设置为 never，则会一直隐藏。

vue
<template>
  <c-carousel height="300px" arrow="always" :autoplay="false">
    <c-carousel-item>
      <div class="carousel-item" style="background: #f56c6c;">
        <h3>手动切换 1</h3>
      </div>
    </c-carousel-item>
    <c-carousel-item>
      <div class="carousel-item" style="background: #909399;">
        <h3>手动切换 2</h3>
      </div>
    </c-carousel-item>
    <c-carousel-item>
      <div class="carousel-item" style="background: #606266;">
        <h3>手动切换 3</h3>
      </div>
    </c-carousel-item>
  </c-carousel>
</template>

<style>
.carousel-item {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
}
</style>

垂直方向 ​

默认情况下，direction 为 horizontal。通过设置 direction 为 vertical 来让走马灯在垂直方向上显示。

vue
<template>
  <c-carousel height="300px" direction="vertical" :autoplay="false">
    <c-carousel-item>
      <div class="carousel-item" style="background: #99a9bf;">
        <h3>垂直轮播 1</h3>
      </div>
    </c-carousel-item>
    <c-carousel-item>
      <div class="carousel-item" style="background: #d3dce6;">
        <h3>垂直轮播 2</h3>
      </div>
    </c-carousel-item>
    <c-carousel-item>
      <div class="carousel-item" style="background: #e5e9f2;">
        <h3>垂直轮播 3</h3>
      </div>
    </c-carousel-item>
  </c-carousel>
</template>

<style>
.carousel-item {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #475669;
  font-size: 20px;
}
</style>
属性名说明类型可选值默认值
height轮播图的高度string—300px
initial-index初始状态激活的幻灯片的索引，从 0 开始number—0
autoplay是否自动切换boolean—true
interval自动切换的时间间隔，单位为毫秒number—3000
indicator-position指示器的位置stringoutside/bottom/top/nonebottom
arrow切换箭头的显示时机stringalways/hover/neverhover
direction轮播图展示的方向stringhorizontal/verticalhorizontal
loop是否循环显示boolean—true
duration切换动画持续时间，单位为毫秒number—300
pause-on-hover鼠标悬浮时是否暂停自动播放boolean—true
事件名说明回调参数
change幻灯片切换时触发(current: number, prev: number)
方法名说明参数
setActiveItem手动切换幻灯片需要切换的幻灯片的索引，从 0 开始；或相应 c-carousel-item 的 name 属性值
prev切换至上一张幻灯片—
next切换至下一张幻灯片—

CarouselItem 属性 ​

属性名说明类型可选值默认值
name幻灯片的名字，可用作 setActiveItem 的参数string——
label该幻灯片所对应指示器的文本string——