• Carousel 走马灯
    • 基础用法
    • 指示器
    • 切换箭头
    • 卡片化
    • 方向
    • Carousel Attributes
    • Carousel Events
    • Carousel Methods
    • Carousel-Item Attributes

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

    基础用法

    适用广泛的基础用法

    Carousel 走马灯 - 图1

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

    1. <template>
    2. <div class="block">
    3. <span class="demonstration">默认 Hover 指示器触发</span>
    4. <el-carousel height="150px">
    5. <el-carousel-item v-for="item in 4" :key="item">
    6. <h3 class="small">{{ item }}</h3>
    7. </el-carousel-item>
    8. </el-carousel>
    9. </div>
    10. <div class="block">
    11. <span class="demonstration">Click 指示器触发</span>
    12. <el-carousel trigger="click" height="150px">
    13. <el-carousel-item v-for="item in 4" :key="item">
    14. <h3 class="small">{{ item }}</h3>
    15. </el-carousel-item>
    16. </el-carousel>
    17. </div>
    18. </template>
    19. <style>
    20. .el-carousel__item h3 {
    21. color: #475669;
    22. font-size: 14px;
    23. opacity: 0.75;
    24. line-height: 150px;
    25. margin: 0;
    26. }
    27. .el-carousel__item:nth-child(2n) {
    28. background-color: #99a9bf;
    29. }
    30. .el-carousel__item:nth-child(2n+1) {
    31. background-color: #d3dce6;
    32. }
    33. </style>

    指示器

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

    Carousel 走马灯 - 图2

    indicator-position属性定义了指示器的位置。默认情况下,它会显示在走马灯内部,设置为outside则会显示在外部;设置为none则不会显示指示器。

    1. <template>
    2. <el-carousel indicator-position="outside">
    3. <el-carousel-item v-for="item in 4" :key="item">
    4. <h3>{{ item }}</h3>
    5. </el-carousel-item>
    6. </el-carousel>
    7. </template>
    8. <style>
    9. .el-carousel__item h3 {
    10. color: #475669;
    11. font-size: 18px;
    12. opacity: 0.75;
    13. line-height: 300px;
    14. margin: 0;
    15. }
    16. .el-carousel__item:nth-child(2n) {
    17. background-color: #99a9bf;
    18. }
    19. .el-carousel__item:nth-child(2n+1) {
    20. background-color: #d3dce6;
    21. }
    22. </style>

    切换箭头

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

    Carousel 走马灯 - 图3

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

    1. <template>
    2. <el-carousel :interval="5000" arrow="always">
    3. <el-carousel-item v-for="item in 4" :key="item">
    4. <h3>{{ item }}</h3>
    5. </el-carousel-item>
    6. </el-carousel>
    7. </template>
    8. <style>
    9. .el-carousel__item h3 {
    10. color: #475669;
    11. font-size: 18px;
    12. opacity: 0.75;
    13. line-height: 300px;
    14. margin: 0;
    15. }
    16. .el-carousel__item:nth-child(2n) {
    17. background-color: #99a9bf;
    18. }
    19. .el-carousel__item:nth-child(2n+1) {
    20. background-color: #d3dce6;
    21. }
    22. </style>

    卡片化

    当页面宽度方向空间空余,但高度方向空间匮乏时,可使用卡片风格

    Carousel 走马灯 - 图4

    type属性设置为card即可启用卡片模式。从交互上来说,卡片模式和一般模式的最大区别在于,可以通过直接点击两侧的幻灯片进行切换。

    1. <template>
    2. <el-carousel :interval="4000" type="card" height="200px">
    3. <el-carousel-item v-for="item in 6" :key="item">
    4. <h3 class="medium">{{ item }}</h3>
    5. </el-carousel-item>
    6. </el-carousel>
    7. </template>
    8. <style>
    9. .el-carousel__item h3 {
    10. color: #475669;
    11. font-size: 14px;
    12. opacity: 0.75;
    13. line-height: 200px;
    14. margin: 0;
    15. }
    16. .el-carousel__item:nth-child(2n) {
    17. background-color: #99a9bf;
    18. }
    19. .el-carousel__item:nth-child(2n+1) {
    20. background-color: #d3dce6;
    21. }
    22. </style>

    方向

    默认情况下,directionhorizontal。通过设置 directionvertical 来让走马灯在垂直方向上显示。

    Carousel 走马灯 - 图5

    1. <template>
    2. <el-carousel height="200px" direction="vertical" :autoplay="false">
    3. <el-carousel-item v-for="item in 3" :key="item">
    4. <h3 class="medium">{{ item }}</h3>
    5. </el-carousel-item>
    6. </el-carousel>
    7. </template>
    8. <style>
    9. .el-carousel__item h3 {
    10. color: #475669;
    11. font-size: 14px;
    12. opacity: 0.75;
    13. line-height: 200px;
    14. margin: 0;
    15. }
    16. .el-carousel__item:nth-child(2n) {
    17. background-color: #99a9bf;
    18. }
    19. .el-carousel__item:nth-child(2n+1) {
    20. background-color: #d3dce6;
    21. }
    22. </style>
    参数说明类型可选值默认值
    height走马灯的高度string
    initial-index初始状态激活的幻灯片的索引,从 0 开始number0
    trigger指示器的触发方式stringclick
    autoplay是否自动切换booleantrue
    interval自动切换的时间间隔,单位为毫秒number3000
    indicator-position指示器的位置stringoutside/none
    arrow切换箭头的显示时机stringalways/hover/neverhover
    type走马灯的类型stringcard
    loop是否循环显示boolean-true
    direction走马灯展示的方向stringhorizontal/verticalhorizontal
    事件名称说明回调参数
    change幻灯片切换时触发目前激活的幻灯片的索引,原幻灯片的索引
    方法名说明参数
    setActiveItem手动切换幻灯片需要切换的幻灯片的索引,从 0 开始;或相应 el-carousel-itemname 属性值
    prev切换至上一张幻灯片
    next切换至下一张幻灯片
    参数说明类型可选值默认值
    name幻灯片的名字,可用作 setActiveItem 的参数string
    label该幻灯片所对应指示器的文本string