element-ui carousel 组件源码分享

carousel 走马灯源码简单分享，主要从以下几个方面：

1、carousel 组件页面结构。

2、carousel 组件属性。

3、carousel 组件事件。

4、carousel 组件方法。

5、carousel-item 组件属性。

一、组件页面结构。

二、组件属性。

2.1 height 走马灯的高度，类型 string，无默认值。

2.2 initial-index 初始状态激活的幻灯片的索引，从 0 开始，类型 number，默认 0。

2.3 trigger 指示器的触发方式，类型 string，可选值 click，默认 hover。

2.4 autoplay 是否自动切换，类型 boolean，默认 true。

 

2.5 interval 自动切换的时间间隔，单位为毫秒，类型 number，默认 3000。

2.6 indicator-position 指示器的位置，类型 string，可选值 outside/none，无默认值。

2.7 arrow 切换箭头的显示时机，类型 string，可选值 always/hover/never，默认值 hover。

2.8 type 走马灯的类型，类型 string，可选值 card，无默认值。

2.9 loop 是否循环显示，类型 boolean，默认 true。

2.10 direction 走马灯展示的方向，类型 string，可选值 horizontal/vertical，默认值 horizontal。

 

三、组件事件。

3.1 change 幻灯片切换时触发，回调参数 目前激活的幻灯片的索引，原幻灯片的索引。

 

四、组件方法。

4.1 setActiveItem 手动切换幻灯片，参数 需要切换的幻灯片的索引，从 0 开始；或相应 el-carousel-item 的 name 属性值。

4.2 prev 切换至上一张幻灯片。

4.3 next 切换至下一张幻灯片。

五 carousel-item 组件属性。

5.1 name 幻灯片的名字，可用作 setActiveItem 的参数，类型 string，无默认值。

5.2 label 该幻灯片所对应指示器的文本，类型 string，无默认值。