Carousel 走马灯 APP
该方法或组件支持移动端小程序调用

PC
该方法或组件支持桌面端小程序调用

走马灯，轮播图

引入方式

数字生活小程序工程中，不需要 import，直接使用组件标签即可。

import {Carousel, CarouselItem} from '@21cnfe/vui'  
Vue.component('Carousel', Carousel)
Vue.component('CarouselItem', CarouselItem)

代码演示

Carousel 走马灯 carousels

基本用法 data 为传入的数据对象数组，使用作用域插槽的方式自定义轮播内容

<Carousel>
  <carousel-item v-for="(item, index) in data" :key="index">
    <img :src="item.url" />
  </carousel-item>
</Carousel>

自定义样式组件提供属性设置走马灯容器的宽高、轮播项宽度、图片滑动效果、边界滑动以及指示点样式

<carousel
  dots 
  :dotStyle="dotStyle"
  :dotActiveStyle="dotActiveStyle"
  :easing="easing"
  :sliderWidth="sliderWidth"
  :sliderHeight="sliderHeight"
  :sliderItmeWidth="sliderItmeWidth"
  :edgeSliderDistance="edgeSliderDistance"
>
  <carousel-item v-for="(item, index) in sliders" :key="index">
    <img :src="item.url" />
  </carousel-item>
</carousel>

无限轮播使用 infinite 开启无限轮播模式

<carousel
  infinite
  dots 
  :sliderWidth="0.8" 
  :sliderItemWidth="1" 
  sliderHeight="160px" 
>
  <carousel-item v-for="(item, index) in sliders" :key="index">
    <img :src="item.url" />
  </carousel-item>
</carousel>

自动播放使用 autoplay 开启自动播放模式，需搭配无限轮播一起使用，可使用 autoplayInterval 设置播放时间间隔

<carousel 
  autoplay 
  infinite 
  dots 
  :sliderWidth="0.8" 
  :sliderItemWidth="1" 
  sliderHeight="160px" 
>
  <carousel-item v-for="(item, index) in sliders" :key="index">
    <img :src="item.url" />
  </carousel-item>
</carousel>

带有按钮使用 hasButton 开启带有按钮，用于切换轮播项

<carousel 
  hasButton 
  dots 
  infinite 
  :dotStyle="dotStyle" 
  :dotActiveStyle="dotActiveStyle" 
  :sliderWidth="0.8" 
  :sliderItemWidth="1" 
  sliderHeight="160px"
>
  <carousel-item v-for="(item, index) in sliders" :key="index">
    <img :src="item.url" />
  </carousel-item>
</carousel>

带有间距属性 cellSpacing 设置轮播项之间的间距

<carousel 
  dots 
  :cellSpacing="30" 
  :edgeSliderDistance="0.3" 
  :sliderWidth="1" 
  :sliderItemWidth="0.7" 
  sliderHeight="160px"
>
  <carousel-item v-for="(item, index) in sliders" :key="index">
    <img :src="item.url" />
  </carousel-item>
</carousel>

轮播项位置属性 ItemPosition 用于设置当前轮播项的位置，适用于搭配间距属性

<carousel 
  dots 
  ItemPosition="center"
  :cellSpacing="30" 
  :edgeSliderDistance="0.3" 
  :sliderWidth="1" 
  :sliderItemWidth="0.6" 
  sliderHeight="160px"
>
<carousel-item v-for="(item, index) in sliders" :key="index">
  <img :src="item.url" />
</carousel-item>

API

属性	说明	类型	默认值
`data`	传入的数据数组	Array	`--`
`selectedIndex`	手动设置当前显示的索引	Number	`0`
`dots`	是否显示面板指示点	Boolean	`false`
`dotStyle`	指示点样式	Object	`--`
`dotActiveStyle`	当前激活的指示点样式	Object	`--`
`slideWidth`	手动设置容器宽度，可以是`slideWidth="200px"`，也可以是相对屏幕的百分比`slideWidth=0.8`	String \| Number	`1`
`slideHeight`	手动设置容器高度，与设置容器宽度方式同理	String \| Number	`1`
`sliderItemWidth`	手动设置轮播单项宽度，可以是`slideItemWidth="200px"`，也可以是相对 `sliderWidth` 的百分比 `slideItemWidth=0.8`	String \| Number	`1`
`easing`	滑动动画，值为带有时间和动画曲线函数名的字符串（参考默认值写法）	String	`transform 0.4s ease`
`edgeSliderDistance`	非循环模式的边界滑动限制，值为0~1的数值，是相对于轮播单项的宽度百分比	Number	`0.5`
`cellSpacing`	项目之间的间距，以 `px` 为单位	Number	`0`
`ItemPosition`	搭配 `cellSpacing` 使用，定位当前轮播项位置，可选值 [`left`, `center`]	String	`left`
`infinite`	无限循环轮播模式	Boolean	`false`
`autoplay`	自动轮播模式，需搭配无限轮播一起使用	Boolean	`false`
`autoplayInterval`	自动轮播时间间隔，单位毫秒	Number	`3000`
`hasButton`	提供按钮进行轮播项前后切换	Boolean	`false`

Event

事件名称	说明	回调参数
`onChange`	change 事件触发的回调函数，返回当前轮播项索引值	void(`currentIndex`)

Slot

属性	说明
`匿名插槽`	插入子组件 `CarouselItem`

Slot(CarouselItem)

属性	说明
`匿名插槽`	插入自定义 DOM 元素

1. Carousel 走马灯 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用

Carousel 走马灯 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用