1# Swiper 2 3 The **\<Swiper>** component is able to display child components in looping mode. 4 5> **NOTE** 6> 7> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Child Components 11 12This component can contain child components. 13 14 15## APIs 16 17Swiper(controller?: SwiperController) 18 19**Parameters** 20 21| Name | Type | Mandatory | Description | 22| ---------- | ------------------------------------- | ---- | -------------------- | 23| controller | [SwiperController](#swipercontroller) | No | Controller bound to the component to control the page switching.| 24 25 26## Attributes 27 28In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. [Menu control](ts-universal-attributes-menu.md) is not supported. 29 30| Name | Type | Description | 31| --------------------------- | ---------------------------------------- | ---------------------------------------- | 32| index | number | Index of the child component currently displayed in the container.<br>Default value: **0** | 33| autoPlay | boolean | Whether to enable automatic playback for child component switching.<br>Default value: **false** | 34| interval | number | Interval for automatic playback, in ms.<br>Default value: **3000** | 35| indicator | boolean | Whether to enable the navigation dots indicator.<br>Default value: **true** | 36| loop | boolean | Whether to enable loop playback.<br>The value **true** means to enable loop playback. When LazyForEach is used, it is recommended that the number of the components to load exceed 5.<br>Default value: **true**| 37| duration | number | Duration of the animation for switching child components, in ms.<br>Default value: **400** | 38| vertical | boolean | Whether vertical swiping is used.<br>Default value: **false** | 39| itemSpace | number \| string | Space between child components.<br>Default value: **0** | 40| displayMode | SwiperDisplayMode | Mode in which elements are displayed along the main axis. This attribute takes effect only when **displayCount** is not set.<br>Default value: **SwiperDisplayMode.Stretch**| 41| cachedCount<sup>8+</sup> | number | Number of child components to be cached.<br>Default value: **1** | 42| disableSwipe<sup>8+</sup> | boolean | Whether to disable the swipe feature.<br>Default value: **false** | 43| curve<sup>8+</sup> | [Curve](ts-appendix-enums.md#curve) \| string | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve](ts-appendix-enums.md#curve). You can also create custom curves (interpolation curve objects) by using the API provided by the [interpolation calculation](../apis/js-apis-curve.md) module.<br>Default value: **Curve.Ease**| 44| indicatorStyle<sup>8+</sup> | {<br>left?: [Length](ts-types.md#length),<br>top?: [Length](ts-types.md#length),<br>right?: [Length](ts-types.md#length),<br>bottom?: [Length](ts-types.md#length),<br>size?: [Length](ts-types.md#length),<br>mask?: boolean,<br>color?: [ResourceColor](ts-types.md),<br>selectedColor?: [ResourceColor](ts-types.md)<br>} | Style of the navigation dots indicator.<br>\- **left**: distance between the navigation dots indicator and the left edge of the **\<Swiper>** component.<br>\- **top**: distance between the navigation dots indicator and the top edge of the **\<Swiper>** component.<br>\- **right**: distance between the navigation dots indicator and the right edge of the **\<Swiper>** component.<br>\- **bottom**: distance between the navigation dots indicator and the bottom edge of the **\<Swiper>** component.<br>\- **size**: diameter of the navigation dots indicator.<br>\- **mask**: whether to enable the mask for the navigation dots indicator.<br>\- **color**: color of the navigation dots indicator.<br>\- **selectedColor**: color of the selected navigation dot.| 45| displayCount<sup>8+</sup> | number\|string | Number of elements to display per page.<br>Default value: **1** | 46| effectMode<sup>8+</sup> | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Swipe effect. For details, see **EdgeEffect**.<br>Default value: **EdgeEffect.Spring**| 47 48## SwiperDisplayMode 49 50| Name| Description| 51| ----------- | ------------------------------------------ | 52| Stretch | The slide width of the **\<Swiper>** component is equal to the width of the component.| 53| AutoLinear | The slide width of the **\<Swiper>** component is equal to that of the child component with the maximum width.| 54 55## SwiperController 56 57Controller of the **\<Swiper>** component. You can bind this object to the **\<Swiper>** component and use it to control page switching. 58 59### showNext 60 61showNext(): void 62 63Turns to the next page. 64 65### showPrevious 66 67showPrevious(): void 68 69Turns to the previous page. 70 71### finishAnimation 72 73finishAnimation(callback?: () => void): void 74 75Stops an animation. 76 77**Parameters** 78 79| Name | Type | Mandatory | Description| 80| --------- | ---------- | ------ | -------- | 81| callback | () => void | No | Callback invoked when the animation stops.| 82 83## Events 84 85### onChange 86 87onChange(event: (index: number) => void) 88 89Triggered when the index of the currently displayed child component changes. 90 91> **NOTE** 92> 93> When the **\<Swiper>** component is used together with **LazyForEach**, the subpage UI cannot be refreshed in the **onChange** event. 94 95**Return value** 96 97| Name | Type | Description| 98| --------- | ---------- | -------- | 99| index | number | Index of the currently displayed element.| 100 101 102## Example 103 104```ts 105// xxx.ets 106class MyDataSource implements IDataSource { 107 private list: number[] = [] 108 private listener: DataChangeListener 109 110 constructor(list: number[]) { 111 this.list = list 112 } 113 114 totalCount(): number { 115 return this.list.length 116 } 117 118 getData(index: number): any { 119 return this.list[index] 120 } 121 122 registerDataChangeListener(listener: DataChangeListener): void { 123 this.listener = listener 124 } 125 126 unregisterDataChangeListener() { 127 } 128} 129 130@Entry 131@Component 132struct SwiperExample { 133 private swiperController: SwiperController = new SwiperController() 134 private data: MyDataSource = new MyDataSource([]) 135 136 aboutToAppear(): void { 137 let list = [] 138 for (var i = 1; i <= 10; i++) { 139 list.push(i.toString()); 140 } 141 this.data = new MyDataSource(list) 142 } 143 144 build() { 145 Column({ space: 5 }) { 146 Swiper(this.swiperController) { 147 LazyForEach(this.data, (item: string) => { 148 Text(item).width('90%').height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(30) 149 }, item => item) 150 } 151 .cachedCount(2) 152 .index(1) 153 .autoPlay(true) 154 .interval(4000) 155 .indicator(true) 156 .loop(true) 157 .duration(1000) 158 .itemSpace(0) 159 .curve(Curve.Linear) 160 .onChange((index: number) => { 161 console.info(index.toString()) 162 }) 163 164 Row({ space: 12 }) { 165 Button('showNext') 166 .onClick(() => { 167 this.swiperController.showNext() 168 }) 169 Button('showPrevious') 170 .onClick(() => { 171 this.swiperController.showPrevious() 172 }) 173 }.margin(5) 174 }.width('100%') 175 .margin({ top: 5 }) 176 } 177} 178``` 179 180 181
