# Swiper The **** component provides a container that allows users to switch among child components by swiping operations. ## Required Permissions None ## Child Components This component can contain child components. ## APIs Swiper\(value:\{controller?: SwiperController\}\) - Parameters

Name	Type	Mandatory	Default Value	Description
controller	SwiperController	No	null	Controller bound to the component to control the page switching.

## Attributes

Name	Type	Default Value	Description
index	number	0	Index of the child component currently displayed in the container.
autoPlay	boolean	false	Whether to enable automatic playback for child component switching. If this attribute is true, the indicator dots do not take effect.
interval	number	3000	Interval for automatic playback, in ms.
indicator	boolean	true	Whether to enable the navigation dots.
loop	boolean	true	Whether to enable loop playback.
duration	number	400	Duration of the animation for switching child components, in ms.
vertical	boolean	false	Whether vertical swiping is used.
itemSpace	Length	0	Space between child components.

### SwiperController Controller of the **** component. You can bind this object to the **** component and use it to control page switching.

Name	Description
showNext():void;	Turns to the next page.
showPrevious():void;	Turns to the previous page.

## Events

Name		Description
onChange( index: number) => void		Triggered when the index of the currently displayed component changes.

## Example ``` @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) // Navigation dots are enabled by default. .loop(false) // Loop playback is enabled by default. .duration(1000) .vertical(false) // Horizontal swiping is enabled by default. .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)