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> **NOTE** 15> 16> Built-in components and custom components are allowed, with support for ([if/else](../../quick-start/arkts-rendering-control-ifelse.md), [ForEach](../../quick-start/arkts-rendering-control-foreach.md), and [LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md)) rendering control. 17> 18> When the **\<Swiper>** component's **displayMode** attribute is set to **SwiperDisplayMode.AutoLinear** or its **displayCount** attribute is set to **'auto'**, the child component whose **visibility** attribute is set to **None** does not take up space in the viewport, but this does not affect the number of navigation dots. 19> 20> If the child component has the **visibility** attribute set to **None** or **Hidden**, it takes up space in the viewport, but is not displayed. 21> 22> When the number of child components is less than or equal to the total number of allowed nodes (totalDisplayCount = DisplayCount + prevMargin? (1: 0 ) + nextMargin? (1: 0 )) in the content area, the **\<Swiper>** component uses the non-looping mode for layout. In this case, the child components specified by **nextMargin** and **prevMargin** take up space in the viewport, but are not displayed. The specifications of the **\<Swiper>** component are calculated based on the value of **totalDisplayCount**. 23> 24> Child components of the **\<Swiper>** component are drawn based on their level if they have the **offset** attribute set. A child component with a higher level overwrites one with a lower level. For example, if the **\<Swiper>** contains three child components and **offset({ x: 100 })** is set for the third child component, the third child component overwrites the first child component during horizontal loop playback. To prevent the first child component from being overwritten, set its **zIndex** attribute to a value greater than that of the third child component. 25 26 27## APIs 28 29Swiper(controller?: SwiperController) 30 31**Parameters** 32 33| Name | Type | Mandatory | Description | 34| ---------- | ------------------------------------- | ---- | -------------------- | 35| controller | [SwiperController](#swipercontroller) | No | Controller bound to the component to control the page switching.| 36 37 38## Attributes 39 40In 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. 41 42| Name | Type | Description | 43| ------------------------------------- | ---------------------------------------- | ---------------------------------------- | 44| index | number | Index of the child component currently displayed in the container.<br>Default value: **0**<br>**NOTE**<br>If the value is less than 0 or greater than or equal to the number of child components, the default value **0** is used.<br>Since API version 10, this attribute supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.| 45| autoPlay | boolean | Whether to enable automatic playback for child component switching.<br>Default value: **false**<br>**NOTE**<br>If **loop** is set to **false**, the playback stops when the last page is displayed. The playback continues when the page is not the last page after a swipe gesture.| 46| interval | number | Interval for automatic playback, in ms.<br>Default value: **3000** | 47| indicator | [DotIndicator](#dotindicator10)<sup>10+</sup> \| [DigitIndicator](#digitindicator10)<sup>10+</sup> \| boolean | Style of the navigation point indicator.<br> \- **DotIndicator**: dot style.<br> \- **DigitIndicator**: digit style.<br> \- **boolean**: whether to enable the navigation point indicator.<br> Default value: **true**<br> Default type: **DotIndicator**| 48| 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**| 49| duration | number | Duration of the animation for switching child components, in ms.<br>Default value: **400** | 50| vertical | boolean | Whether vertical swiping is used.<br>Default value: **false** | 51| itemSpace | number \| string | Space between child components.<br>Default value: **0**<br>**NOTE**<br>This parameter cannot be set in percentage.<br>If the type is number, the default unit is vp. If the type is string, the pixel unit must be explicitly specified, for example, '10px'.| 52| displayMode | [SwiperDisplayMode](#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**| 53| cachedCount<sup>8+</sup> | number | Number of child components to be cached.<br>Default value: **1**| 54| disableSwipe<sup>8+</sup> | boolean | Whether to disable the swipe feature.<br>Default value: **false** | 55| curve<sup>8+</sup> | [Curve](ts-appendix-enums.md#curve) \| string \| [ICurve](../apis/js-apis-curve.md#icurve)<sup>10+</sup>| 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.Linear**| 56| indicatorStyle<sup>(deprecated)</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#resourcecolor),<br>selectedColor?: [ResourceColor](ts-types.md#resourcecolor)<br>} | Style of the navigation point indicator.<br>\- **left**: distance between the navigation point indicator and the left edge of the **\<Swiper>** component.<br>\- **top**: distance between the navigation point indicator and the top edge of the **\<Swiper>** component.<br>\- **right**: distance between the navigation point indicator and the right edge of the **\<Swiper>** component.<br>\- **bottom**: distance between the navigation point indicator and the bottom edge of the **\<Swiper>** component.<br>\- **size**: diameter of the navigation point indicator. The value cannot be in percentage. Default value: **6vp**<br>\- **mask**: whether to enable the mask for the navigation point indicator.<br>\- **color**: color of the navigation point indicator.<br>\- **selectedColor**: color of the selected navigation dot.<br>This API is supported since API version 8 and is deprecated since API version 10. You are advised to use [indicator](#indicator10) instead.| 57| displayCount<sup>8+</sup> | number \| string \| <br>[SwiperAutoFill](#swiperautofill10)<sup>10+</sup> | Number of elements to display per page.<br>Default value: **1**<br>**NOTE**<br>If the value is of the string type, it can only be **'auto'**, whose display effect is the same as that of **SwiperDisplayMode.AutoLinear**.<br>If the value is set to a number less than or equal to 0, the default value **1** is used.<br>If the value is of the number type, child components stretch (shrink) on the main axis after the swiper width [deducting the result of itemSpace x (displayCount - 1)] is evenly distributed among them on the main axis.<br> If the value is of the SwiperAutoFill type, the system automatically calculates and changes the number of elements to display per page based on the **\<Swiper>** component width and the **minSize** settings for the child component. If **minSize** is left empty or set to a value less than or equal to 0, the **\<Swiper>** component displays one column.| 58| effectMode<sup>8+</sup> | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Effect when the component is at one of the edges. This parameter is effective only when **loop** is set to **false**. For details about the supported effects, see the **EdgeEffect** enums.<br>Default value: **EdgeEffect.Spring**<br>**NOTE**<br>The spring effect does not take effect when the controller API is called.| 59| displayArrow<sup>10+</sup> | value:[ArrowStyle](#arrowstyle10) \| boolean,<br>isHoverShow?: boolean | Arrow style of the navigation point indicator.<br>- **value**: arrow and background to set. In abnormal scenarios, the default values in the **ArrowStyle** object are used.<br>\- **isHoverShow**: whether to show the arrow only when the mouse pointer hovers over the navigation point indicator.<br>Default value: **false**<br>**NOTE**<br>When **isHoverShow** is set to **false**, the arrow is always displayed and can be clicked to turn pages.<br>When **isHoverShow** is set to **true**, the arrow is displayed only when the mouse pointer hovers over the navigation point indicator, and it can be clicked to turn pages.| 60| nextMargin<sup>10+</sup> | <br>[Length](ts-types.md#length)<br>| Next margin, used to reveal a small part of the next item.<br>Default value: **0**<br>**NOTE**<br>This attribute is available only when **SwiperDisplayMode** is set to **STRETCH**.<br>When the main axis runs horizontally and either the next margin or previous margin is greater than the calculated width of the child component, neither the next margin nor previous margin is displayed.<br>When the main axis runs vertically and either the next margin or previous margin is greater than the calculated height of the child component, neither the next margin nor previous margin is displayed.| 61| prevMargin<sup>10+</sup> | <br>[Length](ts-types.md#length)<br>| Previous margin, used to reveal a small part of the previous item.<br>Default value: **0**<br>**NOTE**<br>This attribute is available only when **SwiperDisplayMode** is set to **STRETCH**.<br>When the main axis runs horizontally and either the next margin or previous margin is greater than the calculated width of the child component, neither the next margin nor previous margin is displayed.<br>When the main axis runs vertically and either the next margin or previous margin is greater than the calculated height of the child component, neither the next margin nor previous margin is displayed.| 62| nestedScroll<sup>11+</sup> | [SwiperNestedScrollMode](#swipernestedscrollmode11) | Nested scrolling mode of the **\<Swiper>** component and its parent container.<br>Default value: **SwiperNestedScrollMode.SELF_ONLY**<br>**NOTE**<br>When **loop** is set to **true**, the **\<Swiper>** component has no edge effect and does not trigger nested scrolling of its parent container.| 63 64## SwiperDisplayMode 65 66| Name | Description | 67| --------------------------------- | ---------------------------------------- | 68| Stretch<sup>(deprecated)</sup> | The slide width of the **\<Swiper>** component is equal to the width of the component.<br>This API is deprecated since API version 10. You are advised to use **STRETCH** instead.| 69| AutoLinear<sup>(deprecated)</sup> | The slide width of the **\<Swiper>** component is equal to that of the child component with the maximum width.<br>This API is deprecated since API version 10. You are advised to use **AUTO_LINEAR** instead.| 70| STRETCH<sup>10+</sup> | The slide width of the **\<Swiper>** component is equal to the width of the component. | 71| AUTO_LINEAR<sup>10+</sup> | The slide width of the **\<Swiper>** component is equal to the width of the leftmost child component in the viewport. | 72 73## SwiperNestedScrollMode<sup>11+</sup> 74 75| Name | Description | 76| ------------ | ---------------------------------------- | 77| SELF_ONLY | The scrolling is contained within the **\<Swiper>** component, and no scroll chaining occurs, that is, the parent container does not scroll when the component scrolling reaches the boundary.| 78| SELF_FIRST | The **\<Swiper>** component scrolls first, and when it hits the boundary, the parent container scrolls. When the parent container hits the boundary, its edge effect is displayed. If no edge effect is specified for the parent container, the edge effect of the **\<Swiper>** component is displayed instead.| 79 80## SwiperController 81 82Controller of the **\<Swiper>** component. You can bind this object to the **\<Swiper>** component and use it to control page switching. 83 84### Objects to Import 85 86```ts 87let controller: SwiperController = new SwiperController() 88``` 89 90### showNext 91 92showNext(): void 93 94Turns to the next page. Page turning occurs with the animation, whose duration is specified by **duration**. 95 96### showPrevious 97 98showPrevious(): void 99 100Turns to the previous page. Page turning occurs with the animation, whose duration is specified by **duration**. 101 102### finishAnimation 103 104finishAnimation(callback?: () => void): void 105 106Stops an animation. 107 108**Parameters** 109 110| Name | Type | Mandatory. | Description | 111| -------- | ---------- | ---- | -------- | 112| callback | () => void | No | Callback invoked when the animation stops.| 113 114## Indicator<sup>10+</sup> 115 116Sets the distance between the navigation point indicator and the **\<Swiper>** component. 117 118| Name | Type | Mandatory. | Description | 119| ------ | ---------------------------- | ---- | ---------------------------------------- | 120| left | [Length](ts-types.md#length) | No | Distance between the navigation point indicator and the left edge of the **\<Swiper>** component.<br>Default value: **0**<br>Unit: vp| 121| top | [Length](ts-types.md#length) | No | Distance between the navigation point indicator and the top edge of the **\<Swiper>** component.<br>Default value: **0**<br>Unit: vp| 122| right | [Length](ts-types.md#length) | No | Distance between the navigation point indicator and the right edge of the **\<Swiper>** component.<br>Default value: **0**<br>Unit: vp| 123| bottom | [Length](ts-types.md#length) | No | Distance between the navigation point indicator and the bottom edge of the **\<Swiper>** component.<br>Default value: **0**<br>Unit: vp| 124| static dot | - | No | **DotIndicator** object returned.| 125| static digit | - | No | **DigitIndicator** object returned.| 126 127## DotIndicator<sup>10+</sup> 128 129Defines the navigation point indicator of the dot style, which inherits attributes and features from **Indicator**. 130 131| Name | Type | Mandatory. | Description | 132| ------------------ | ---------------------------------------- | ---- | ---------------------------------------- | 133| itemWidth | [Length](ts-types.md#length) | No | Width of the navigation point indicator of the dot style. This parameter cannot be set in percentage.<br>Default value: **6**<br>Unit: vp| 134| itemHeight | [Length](ts-types.md#length) | No | Height of the navigation point indicator of the dot style. This parameter cannot be set in percentage.<br>Default value: **6**<br>Unit: vp| 135| selectedItemWidth | [Length](ts-types.md#length) | No | Width of the selected navigation point indicator of the dot style. This parameter cannot be set in percentage.<br>Default value: **12**<br>Unit: vp| 136| selectedItemHeight | [Length](ts-types.md#length) | No | Height of the selected navigation point indicator of the dot style. This parameter cannot be set in percentage.<br>Default value: **6**<br>Unit: vp| 137| mask | boolean | No | Whether to enable the mask for the navigation point indicator of the dot style.<br>Default value: **false**| 138| color | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the navigation point indicator of the dot style.<br>Default value: **'\#182431'** (10% opacity)| 139| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the selected navigation point indicator of the dot style.<br>Default value: **'\#007DFF'**| 140 141>**NOTE** 142> 143>When pressed, the navigation point indicator is zoomed in by 1.33 times. To account for this, there is a certain distance between the navigation point indicator's visible boundary and its actual boundary in the non-pressed state. The distance increases with the value of **itemWidth**, **itemHeight**, **selectedItemWidth**, and **selectedItemHeight**. 144 145## DigitIndicator<sup>10+</sup> 146 147Defines the navigation point indicator of the digit style, which inherits attributes and features from **Indicator**. 148 149| Name | Type | Mandatory. | Description | 150| ----------------- | ---------------------------------------- | ---- | ---------------------------------------- | 151| fontColor | [ResourceColor](ts-types.md#resourcecolor) | No | Font color of the navigation point indicator of the digit style.<br>Default value: **'\#ff182431'**| 152| selectedFontColor | [ResourceColor](ts-types.md#resourcecolor) | No | Font color of the selected navigation point indicator of the digit style.<br>Default value: **'\#ff182431'**| 153| digitFont | {<br>size?:[Length](ts-types.md#length)<br>weight?:number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string<br>} | No | Font style of the navigation point indicator of the digit style.<br>\- **size**:font size. It cannot be set in percentage.<br>Default value: **14vp**<br>\- **weight**: font weight.| 154| selectedDigitFont | {<br>size?:[Length](ts-types.md#length)<br>weight?:number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string<br>} | No | Font style of the selected navigation point indicator of the digit style.<br>\- **size**:font size. It cannot be set in percentage.<br>Default value: **14vp**<br>\- **weight**: font weight.| 155 156## ArrowStyle<sup>10+</sup> 157Describes the left and right arrow attributes. 158 159| Name | Type | Mandatory. | Description | 160| ---------------- | ---------------------------------------- | ---- | ---------------------------------------- | 161| showBackground | boolean | No | Whether to show the background for the arrow.<br>Default value: **false** | 162| isSidebarMiddle | boolean | No | Whether the arrow is shown on either side of the navigation point indicator.<br>Default value: **false** (the arrow is shown on either side of the navigation point indicator)| 163| backgroundSize | [Length](ts-types.md#length) | No | Size of the background.<br>On both sides of the navigation point indicator:<br>Default value: **24vp**<br>On both sides of the component:<br>Default value: **32vp**<br>This parameter cannot be set in percentage.| 164| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the background.<br>On both sides of the navigation point indicator:<br>Default value: **'\#00000000'**<br>On both sides of the component:<br>Default value: **'\#19182431'**| 165| arrowSize | [Length](ts-types.md#length) | No | Size of the arrow.<br>On both sides of the navigation point indicator:<br>Default value: **18vp**<br>On both sides of the component:<br>Default value: **24vp**<br>**NOTE**<br>If **showBackground** is set to **true**, the value of **arrowSize** is 3/4 of the value of **backgroundSize**.<br>This parameter cannot be set in percentage.| 166| arrowColor | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the arrow.<br>Default value: **'\#182431'** | 167 168## SwiperAutoFill<sup>10+</sup> 169 170Describes the auto-fill attribute. 171 172| Name | Type | Mandatory.| Description | 173| ------- | -------------------- | ------ | ------------------------------------ | 174| minSize | [VP](ts-types.md#vp10) | Yes | Minimum width of the element.<br>Default value: **0**| 175 176## Events 177 178In addition to the [universal events](ts-universal-events-click.md), the following events are supported. 179 180| Name | Description | 181| ---------------------------------------- | ---------------------------------------- | 182| onChange(event: (index: number) => void) | Triggered when the index of the currently displayed child component changes.<br>- **index**: index of the currently displayed element.<br>**NOTE**<br>When the **\<Swiper>** component is used together with **LazyForEach**, the subpage UI update cannot be triggered in the **onChange** event.| 183| onAnimationStart<sup>9+</sup>(event: (index: number, targetIndex<sup>10+</sup>: number, extraInfo<sup>10+</sup>: [SwiperAnimationEvent](ts-types.md#swiperanimationevent10)) => void) | Triggered when the switching animation starts.<br>- **index**: index of the currently displayed element.<br>- **targetIndex**: index of the target element to switch to.<br>- **extraInfo**: extra information of the animation, including the offset of the currently displayed element and target element relative to the start position of the **\<Swiper>** along the main axis, and the hands-off velocity.<br>**NOTE**<br>The **index** parameter indicates the index before the animation starts (not the one after). When the **\<Swiper>** component contains multiple columns, the index is of the leftmost element.| 184| onAnimationEnd<sup>9+</sup>(event: (index: number, extraInfo: [SwiperAnimationEvent](ts-types.md#swiperanimationevent10)) => void) | Triggered when the switching animation ends.<br>- **index**: index of the currently displayed element.<br>- **extraInfo**: extra information of the animation, which is the offset of the currently displayed element relative to the start position of the **\<Swiper>** along the main axis.<br>**NOTE**<br>This event is triggered when the switching animation of the **\<Swiper>** component ends, whether it is caused by gesture interruption or by calling **finishAnimation** through SwiperController. The **index** parameter indicates the index after the animation ends. When the **\<Swiper>** component contains multiple columns, the index is of the leftmost element.| 185| onGestureSwipe<sup>10+</sup>(event: (index: number, extraInfo: [SwiperAnimationEvent](ts-types.md#swiperanimationevent10)) => void) | Triggered on a frame-by-frame basis when the page is turned by a swipe.<br>- **index**: index of the currently displayed element.<br>- **extraInfo**: extra information of the animation, which is the offset of the currently displayed element relative to the start position of the **\<Swiper>** along the main axis.<br>**NOTE**<br>If there are multiple columns, **index** indicates the index of the leftmost component.| 186 187## Example 188 189### Example 1 190```ts 191// xxx.ets 192class MyDataSource implements IDataSource { 193 private list: number[] = [] 194 195 constructor(list: number[]) { 196 this.list = list 197 } 198 199 totalCount(): number { 200 return this.list.length 201 } 202 203 getData(index: number): number { 204 return this.list[index] 205 } 206 207 registerDataChangeListener(listener: DataChangeListener): void { 208 } 209 210 unregisterDataChangeListener() { 211 } 212} 213 214@Entry 215@Component 216struct SwiperExample { 217 private swiperController: SwiperController = new SwiperController() 218 private data: MyDataSource = new MyDataSource([]) 219 220 aboutToAppear(): void { 221 let list: number[] = [] 222 for (let i = 1; i <= 10; i++) { 223 list.push(i); 224 } 225 this.data = new MyDataSource(list) 226 } 227 228 build() { 229 Column({ space: 5 }) { 230 Swiper(this.swiperController) { 231 LazyForEach(this.data, (item: string) => { 232 Text(item.toString()) 233 .width('90%') 234 .height(160) 235 .backgroundColor(0xAFEEEE) 236 .textAlign(TextAlign.Center) 237 .fontSize(30) 238 }, (item: string) => item) 239 } 240 .cachedCount(2) 241 .index(1) 242 .autoPlay(true) 243 .interval(4000) 244 .loop(true) 245 .duration(1000) 246 .itemSpace(0) 247 .indicator( // Set the style of the navigation point indicator. 248 new DotIndicator() 249 .itemWidth(15) 250 .itemHeight(15) 251 .selectedItemWidth(15) 252 .selectedItemHeight(15) 253 .color(Color.Gray) 254 .selectedColor(Color.Blue)) 255 .displayArrow({ // Set the arrow style of the navigation point indicator. 256 showBackground: true, 257 isSidebarMiddle: true, 258 backgroundSize: 24, 259 backgroundColor: Color.White, 260 arrowSize: 18, 261 arrowColor: Color.Blue 262 }, false) 263 .curve(Curve.Linear) 264 .onChange((index: number) => { 265 console.info(index.toString()) 266 }) 267 .onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent) => { 268 console.info("index: " + index) 269 console.info("current offset: " + extraInfo.currentOffset) 270 }) 271 .onAnimationStart((index: number, targetIndex: number, extraInfo: SwiperAnimationEvent) => { 272 console.info("index: " + index) 273 console.info("targetIndex: " + targetIndex) 274 console.info("current offset: " + extraInfo.currentOffset) 275 console.info("target offset: " + extraInfo.targetOffset) 276 console.info("velocity: " + extraInfo.velocity) 277 }) 278 .onAnimationEnd((index: number, extraInfo: SwiperAnimationEvent) => { 279 console.info("index: " + index) 280 console.info("current offset: " + extraInfo.currentOffset) 281 }) 282 283 Row({ space: 12 }) { 284 Button('showNext') 285 .onClick(() => { 286 this.swiperController.showNext() 287 }) 288 Button('showPrevious') 289 .onClick(() => { 290 this.swiperController.showPrevious() 291 }) 292 }.margin(5) 293 }.width('100%') 294 .margin({ top: 5 }) 295 } 296} 297``` 298 299 300 301### Example 2 302```ts 303// xxx.ets 304class MyDataSource implements IDataSource { 305 private list: number[] = [] 306 307 constructor(list: number[]) { 308 this.list = list 309 } 310 311 totalCount(): number { 312 return this.list.length 313 } 314 315 getData(index: number): number { 316 return this.list[index] 317 } 318 319 registerDataChangeListener(listener: DataChangeListener): void { 320 } 321 322 unregisterDataChangeListener() { 323 } 324} 325 326@Entry 327@Component 328struct SwiperExample { 329 private swiperController: SwiperController = new SwiperController() 330 private data: MyDataSource = new MyDataSource([]) 331 332 aboutToAppear(): void { 333 let list: number[] = [] 334 for (let i = 1; i <= 10; i++) { 335 list.push(i); 336 } 337 this.data = new MyDataSource(list) 338 } 339 340 build() { 341 Column({ space: 5 }) { 342 Swiper(this.swiperController) { 343 LazyForEach(this.data, (item: string) => { 344 Text(item.toString()) 345 .width('90%') 346 .height(160) 347 .backgroundColor(0xAFEEEE) 348 .textAlign(TextAlign.Center) 349 .fontSize(30) 350 }, (item: string) => item) 351 } 352 .cachedCount(2) 353 .index(1) 354 .autoPlay(true) 355 .interval(4000) 356 .indicator(Indicator.digit() // Set the navigation point indicator of the digit style. 357 .right("43%") 358 .top(200) 359 .fontColor(Color.Gray) 360 .selectedFontColor(Color.Gray) 361 .digitFont({ size: 20, weight: FontWeight.Bold }) 362 .selectedDigitFont({ size: 20, weight: FontWeight.Normal })) 363 .loop(true) 364 .duration(1000) 365 .itemSpace(0) 366 .displayArrow(true, false) 367 368 Row({ space: 12 }) { 369 Button('showNext') 370 .onClick(() => { 371 this.swiperController.showNext() 372 }) 373 Button('showPrevious') 374 .onClick(() => { 375 this.swiperController.showPrevious() 376 }) 377 }.margin(5) 378 }.width('100%') 379 .margin({ top: 5 }) 380 } 381} 382``` 383 384
