Carousel 走马灯

概述

常用于一组图片或卡片轮播,当内容空间不足时,可以用走马灯的形式进行收纳,进行轮播展现。

代码示例

Carousel 走马灯 - 图1

基础用法

最基本的用法。

  1. <template>
  2. <Carousel v-model="value1" loop>
  3. <CarouselItem>
  4. <div class="demo-carousel">1</div>
  5. </CarouselItem>
  6. <CarouselItem>
  7. <div class="demo-carousel">2</div>
  8. </CarouselItem>
  9. <CarouselItem>
  10. <div class="demo-carousel">3</div>
  11. </CarouselItem>
  12. <CarouselItem>
  13. <div class="demo-carousel">4</div>
  14. </CarouselItem>
  15. </Carousel>
  16. </template>
  17. <script>
  18. export default {
  19. data () {
  20. return {
  21. value1: 0
  22. }
  23. }
  24. }
  25. </script>

Carousel 走马灯 - 图2

自动切换

设置属性 autoplay 可以自动轮播,同时可以设置属性 autoplay-speed 改变自动播放的速度。

  1. <template>
  2. <Carousel autoplay v-model="value2" loop>
  3. <CarouselItem>
  4. <div class="demo-carousel">1</div>
  5. </CarouselItem>
  6. <CarouselItem>
  7. <div class="demo-carousel">2</div>
  8. </CarouselItem>
  9. <CarouselItem>
  10. <div class="demo-carousel">3</div>
  11. </CarouselItem>
  12. <CarouselItem>
  13. <div class="demo-carousel">4</div>
  14. </CarouselItem>
  15. </Carousel>
  16. </template>
  17. <script>
  18. export default {
  19. data () {
  20. return {
  21. value2: 0
  22. }
  23. }
  24. }
  25. </script>

Carousel 走马灯 - 图3

综合设置

动态调整各配置。

  1. <template>
  2. <Form :model="setting" :label-width="100">
  3. <FormItem label="Automatic switching">
  4. <Switch v-model="setting.autoplay">
  5. <span slot="open">On</span>
  6. <span slot="close">Off</span>
  7. </Switch>
  8. </FormItem>
  9. <FormItem label="Circular indicator">
  10. <Switch v-model="setting.radiusDot">
  11. <span slot="open">On</span>
  12. <span slot="close">Off</span>
  13. </Switch>
  14. </FormItem>
  15. <FormItem label="Automatic switching speed">
  16. <Slider v-model="setting.autoplaySpeed" :min="300" :max="10000" :step="100"></Slider>
  17. </FormItem>
  18. <FormItem label="Indicator position">
  19. <RadioGroup v-model="setting.dots" type="button">
  20. <Radio label="inside">interior</Radio>
  21. <Radio label="outside">exterior</Radio>
  22. <Radio label="none">Don't show</Radio>
  23. </RadioGroup>
  24. </FormItem>
  25. <FormItem label="Switch the arrow">
  26. <RadioGroup v-model="setting.arrow" type="button">
  27. <Radio label="hover">Hover displayed when</Radio>
  28. <Radio label="always">Always show</Radio>
  29. <Radio label="never">Don't show</Radio>
  30. </RadioGroup>
  31. </FormItem>
  32. <FormItem label="Indicator trigger mode">
  33. <RadioGroup v-model="setting.trigger" type="button">
  34. <Radio label="click">Click</Radio>
  35. <Radio label="hover">Hover</Radio>
  36. </RadioGroup>
  37. </FormItem>
  38. </Form>
  39. <Carousel
  40. v-model="value3"
  41. :autoplay="setting.autoplay"
  42. :autoplay-speed="setting.autoplaySpeed"
  43. :dots="setting.dots"
  44. :radius-dot="setting.radiusDot"
  45. :trigger="setting.trigger"
  46. :arrow="setting.arrow">
  47. <CarouselItem>
  48. <div class="demo-carousel">1</div>
  49. </CarouselItem>
  50. <CarouselItem>
  51. <div class="demo-carousel">2</div>
  52. </CarouselItem>
  53. <CarouselItem>
  54. <div class="demo-carousel">3</div>
  55. </CarouselItem>
  56. <CarouselItem>
  57. <div class="demo-carousel">4</div>
  58. </CarouselItem>
  59. </Carousel>
  60. </template>
  61. <script>
  62. export default {
  63. data () {
  64. return {
  65. value3: 0,
  66. setting: {
  67. autoplay: false,
  68. autoplaySpeed: 2000,
  69. dots: 'inside',
  70. radiusDot: false,
  71. trigger: 'click',
  72. arrow: 'hover'
  73. }
  74. }
  75. },
  76. }
  77. </script>

API

Carousel props

属性 说明 类型 默认值
value 幻灯片的索引,从 0 开始,可以使用 v-model 双向绑定数据 Number 0
height 走马灯的高度,可填 auto 或具体高度数值,单位 px String | Number auto
loop 是否开启循环 Boolean false
autoplay 是否自动切换 Boolean false
autoplay-speed 自动切换的时间间隔,单位为毫秒 Number 2000
dots 指示器的位置,可选值为 inside (内部),outside(外部),none(不显示) String inside
radius-dot 是否显示圆形指示器 Boolean false
trigger 指示器的触发方式,可选值为 click(点击),hover(悬停) String click
arrow 切换箭头的显示时机,可选值为 hover(悬停),always(一直显示),never(不显示) String hover
easing 动画效果 String ease

Carousel events

事件名 说明 返回值
on-change 幻灯片切换时触发,目前激活的幻灯片的索引,原幻灯片的索引 oldValue, value
on-click 4.1.0 点击幻灯片时触发,返回索引值 index