# Swiper 滑动容器，提供切换子组件显示的能力。 ## 权限列表无 ## 子组件可以包含子组件。 ## 接口 Swiper\(value:\{controller?: SwiperController\}\) - 参数

参数名	参数类型	必填	默认值	参数描述
controller	SwiperController	否	null	给组件绑定一个控制器，用来控制组件翻页。

## 属性

名称	参数类型	默认值	描述
index	number	0	设置当前在容器中显示的子组件的索引值。
autoPlay	boolean	false	子组件是否自动播放，自动播放状态下，导航点不可操作。
interval	number	3000	使用自动播放时播放的时间间隔，单位为毫秒。
indicator	boolean	true	是否启用导航点指示器。
loop	boolean	true	是否开启循环。
duration	number	400	子组件切换的动画时长，单位为毫秒。
vertical	boolean	false	是否为纵向滑动。
itemSpace	Length	0	设置子组件与子组件之间间隙。

### SwiperController Swiper容器组件的控制器，可以将此对象绑定至Swiper组件，然后通过它控制翻页。

接口名称	功能描述
showNext():void;	翻至下一页。
showPrevious():void;	翻至上一页。

## 事件

名称		功能描述
onChange( index: number) => void		当前显示的组件索引变化时触发该事件。

## 示例 ``` @Entry @Component struct SwiperExample { private swiperController: SwiperController = new SwiperController() build() { Column({ space: 5 }) { Swiper(this.swiperController) { Text('1').width('90%').height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(20) Text('2').width('90%').height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(20) Text('3').width('90%').height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(20) Text('4').width('90%').height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(20) Text('5').width('90%').height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(20) } .index(1) .autoPlay(true) .interval(4000) .indicator(true) // 默认开启指示点 .loop(false) // 默认开启循环播放 .duration(1000) .vertical(false) // 默认横向切换 .itemSpace(0) .onChange((index: number) => { console.info(index.toString()) }) Flex({ justifyContent: FlexAlign.SpaceAround }) { Button('next') .onClick(() => { this.swiperController.showNext() }) Button('preview') .onClick(() => { this.swiperController.showPrevious() }) } }.margin({ top: 5 }) } } ``` ![](figures/swiper.gif)