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> - The default value of the universal attribute [clip](ts-universal-attributes-sharp-clipping.md) is **true** for the **Swiper** component. 10> 11> - The **Swiper** component incorporates a [PanGesture](ts-basic-gestures-pangesture.md) event that facilitates the swiping action to cycle through its child components. Setting [disableSwipe](#disableswipe8) to **true** will cancel the internal listening for the **PanGesture** event, disabling the swiping interaction. 12 13## Child Components 14 15This component can contain child components. 16 17> **NOTE** 18> 19> - Child components can consist of both built-in components and custom components, and their rendering can be controlled with [if/else](../../../quick-start/arkts-rendering-control-ifelse.md), [ForEach](../../../quick-start/arkts-rendering-control-foreach.md), [LazyForEach](../../../quick-start/arkts-rendering-control-lazyforeach.md), and [Repeat](../../../quick-start/arkts-new-rendering-control-repeat.md). To maximize the benefits of lazy loading, avoid mixing lazy loading components (including **LazyForEach** and **Repeat**) and non-lazy loading components, and exercise caution when using multiple lazy loading components. 20> 21> - If a child component has its **visibility** attribute set to **None** and the **Swiper** component has its **displayCount** attribute set to **'auto'**, the child component takes up space in the viewport, but is not displayed. 22> 23> - If a child component has its **visibility** attribute set to **None** or **Hidden**, it takes up space in the viewport, but is not displayed. 24> 25> - When the number of child components is less than or equal to the total number of allowed nodes in the content area (totalDisplayCount = displayCount + prevMargin? (1 : 0 ) + nextMargin? (1 : 0 )), the **Swiper** component generally 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**. The exceptions are as follows: 26> 27> - When the number of child components is equal to the total number of allowed nodes in the content area and both **prevMargin** and **nextMargin** take effect, set **loop** to **true** to enable loop playback. 28> 29> - When the number of child components is equal to the value of **displayCount** plus 1 and at least one of **prevMargin** and **nextMargin** takes effect, set **loop** to **true** to enable loop playback. When loop playback is enabled, a snapshot is generated as the placeholder image. (The snapshot may not be correctly generated for those components that take a long time to display, such as those that use asynchronous image loading. Avoid enabling loop playback under this scenario.) 30> 31> - 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. 32> 33> - If rendering control ([if/else](../../../quick-start/arkts-rendering-control-ifelse.md), [ForEach](../../../quick-start/arkts-rendering-control-foreach.md), [LazyForEach](../../../quick-start/arkts-rendering-control-lazyforeach.md), or [Repeat](../../../quick-start/arkts-new-rendering-control-repeat.md)) is employed, do not perform operations on the data source while a component animation is in progress. Such operations can cause layout issues. 34 35## APIs 36 37Swiper(controller?: SwiperController) 38 39**Widget capability**: This API can be used in ArkTS widgets since API version 10. 40 41**Atomic service API**: This API can be used in atomic services since API version 11. 42 43**System capability**: SystemCapability.ArkUI.ArkUI.Full 44 45**Parameters** 46 47| Name | Type | Mandatory | Description | 48| ---------- | ------------------------------------- | ---- | -------------------- | 49| controller | [SwiperController](#swipercontroller) | No | Controller bound to the component to control the page turning.| 50 51 52## Attributes 53 54In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 55 56### index 57 58index(value: number) 59 60Sets the index of the child component currently displayed in the container. If the value is less than 0 or greater than or equal to the number of child components, the default value **0** is used. 61 62Since API version 10, this attribute supports two-way binding through [$$](../../../quick-start/arkts-two-way-sync.md). 63 64**Widget capability**: This API can be used in ArkTS widgets since API version 10. 65 66**Atomic service API**: This API can be used in atomic services since API version 11. 67 68**System capability**: SystemCapability.ArkUI.ArkUI.Full 69 70**Parameters** 71 72| Name| Type | Mandatory| Description | 73| ------ | ------ | ---- | ------------------------------------------------ | 74| value | number | Yes | Index of the child component currently displayed in the container.<br>Default value: **0**<br>**NOTE**<br>If the value specified is less than 0 or greater than the maximum page index, the value **0** is used.| 75 76### autoPlay 77 78autoPlay(value: boolean) 79 80Sets whether to enable automatic playback for child component switching. 81 82If **loop** is set to **false**, the playback stops when the last page is reached. The playback continues when the page is not the last page after a swipe gesture. If the **Swiper** component becomes invisible, the playback stops. 83 84**Widget capability**: This API can be used in ArkTS widgets since API version 10. 85 86**Atomic service API**: This API can be used in atomic services since API version 11. 87 88**System capability**: SystemCapability.ArkUI.ArkUI.Full 89 90**Parameters** 91 92| Name| Type | Mandatory| Description | 93| ------ | ------- | ---- | -------------------------------------- | 94| value | boolean | Yes | Whether to enable automatic playback for child component switching.<br>Default value: **false**| 95 96### interval 97 98interval(value: number) 99 100Sets the interval for automatic playback. 101 102**Widget capability**: This API can be used in ArkTS widgets since API version 10. 103 104**Atomic service API**: This API can be used in atomic services since API version 11. 105 106**System capability**: SystemCapability.ArkUI.ArkUI.Full 107 108**Parameters** 109 110| Name| Type | Mandatory| Description | 111| ------ | ------ | ---- | ---------------------------------------------------------- | 112| value | number | Yes | Interval for automatic playback.<br>Default value: **3000**<br>Unit: ms| 113 114### indicator 115 116indicator(value: DotIndicator | DigitIndicator | boolean) 117 118Sets the style of the navigation point indicator. 119 120**Widget capability**: This API can be used in ArkTS widgets since API version 10. 121 122**Atomic service API**: This API can be used in atomic services since API version 11. 123 124**System capability**: SystemCapability.ArkUI.ArkUI.Full 125 126**Parameters** 127 128| Name| Type | Mandatory| Description | 129| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 130| value | [DotIndicator](#dotindicator10)<sup>10+</sup> \| [DigitIndicator](#digitindicator10)<sup>10+</sup> \| boolean | Yes | Style of the navigation point indicator.<br> \- **DotIndicator**: dot style.<br> \- **DigitIndicator**: digit style.<br> \- **boolean**: whether to enable the navigation point indicator. The value **true** means to enable the feature, and **false** means the opposite.<br> Default value: **true**<br> Default style: **DotIndicator**| 131 132### loop 133 134loop(value: boolean) 135 136Sets whether to enable loop playback. 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. 137 138**Widget capability**: This API can be used in ArkTS widgets since API version 10. 139 140**Atomic service API**: This API can be used in atomic services since API version 11. 141 142**System capability**: SystemCapability.ArkUI.ArkUI.Full 143 144**Parameters** 145 146| Name| Type | Mandatory| Description | 147| ------ | ------- | ---- | ------------------------------- | 148| value | boolean | Yes | Whether to enable loop playback.<br>Default value: **true**| 149 150### duration 151 152duration(value: number) 153 154Sets the duration of the animation for child component switching. 155 156**duration** must be used in conjunction with [curve](#curve8). 157 158The default curve for the animation is [interpolatingSpring](../js-apis-curve.md#curvesinterpolatingspring10).When this curve is applied, the duration of the animation is determined solely by the parameters of the curve itself and is no longer governed by the **duration** setting. For curves that are not governed by the **duration** setting, see [Interpolation Calculation](../js-apis-curve.md). 159Such curves include [springMotion](../js-apis-curve.md#curvesspringmotion9), [responsiveSpringMotion](../js-apis-curve.md#curvesresponsivespringmotion9), and **interpolatingSpring**. To have the animation duration managed by **duration**, you should select a different curve for the **curve** attribute. 160 161**Atomic service API**: This API can be used in atomic services since API version 11. 162 163**System capability**: SystemCapability.ArkUI.ArkUI.Full 164 165**Parameters** 166 167| Name| Type | Mandatory| Description | 168| ------ | ------ | ---- | ----------------------------------------------------- | 169| value | number | Yes | Duration of the autoplay for child component switching.<br>Default value: **400**<br>Unit: ms| 170 171### vertical 172 173vertical(value: boolean) 174 175Sets whether vertical swiping is used. 176 177**Widget capability**: This API can be used in ArkTS widgets since API version 10. 178 179**Atomic service API**: This API can be used in atomic services since API version 11. 180 181**System capability**: SystemCapability.ArkUI.ArkUI.Full 182 183**Parameters** 184 185| Name| Type | Mandatory| Description | 186| ------ | ------- | ---- | ---------------------------------- | 187| value | boolean | Yes | Whether vertical swiping is used. The value **true** means vertical swiping, and **false** means horizontal swiping.<br>Default value: **false**| 188 189### itemSpace 190 191itemSpace(value: number | string) 192 193Sets the space between child components. This attribute cannot be set in percentage. 194 195If the type is number, the default unit is vp. If the type is string, the pixel unit must be explicitly specified, for example, **'10px'**; if the unit is not specified, for example, **'10'**, the default unit vp is used. 196 197**Widget capability**: This API can be used in ArkTS widgets since API version 10. 198 199**Atomic service API**: This API can be used in atomic services since API version 11. 200 201**System capability**: SystemCapability.ArkUI.ArkUI.Full 202 203**Parameters** 204 205| Name| Type | Mandatory| Description | 206| ------ | -------------------------- | ---- | -------------------------------------- | 207| value | number \| string | Yes | Space between child components.<br>Default value: **0**| 208 209### displayMode 210 211displayMode(value: SwiperDisplayMode) 212 213Sets the mode in which elements are displayed along the main axis. This API takes effect only when **displayCount** is not set. 214 215**Widget capability**: This API can be used in ArkTS widgets since API version 10. 216 217**Atomic service API**: This API can be used in atomic services since API version 11. 218 219**System capability**: SystemCapability.ArkUI.ArkUI.Full 220 221**Parameters** 222 223| Name| Type | Mandatory| Description | 224| ------ | ----------------------------------------------- | ---- | ------------------------------------------------------------ | 225| value | [SwiperDisplayMode](#swiperdisplaymode) | Yes | Mode in which elements are displayed along the main axis.<br>Default value: **SwiperDisplayMode.STRETCH**| 226 227### cachedCount<sup>8+</sup> 228 229cachedCount(value: number) 230 231Sets the number of child components to be preloaded (cached), which are needed for the specific number of pages immediately before and after the current page. For example, if **cachedCount** is set to **1**, the child components on the previous page and the next page are cached. If **swipeByGroup** in **displayCount** is set to **true**, child components are cached by group. For example, if **cachedCount** is set to **1** and **swipeByGroup** is set to **true**, the child components in the previous and next groups are cached. 232 233**Widget capability**: This API can be used in ArkTS widgets since API version 10. 234 235**Atomic service API**: This API can be used in atomic services since API version 11. 236 237**System capability**: SystemCapability.ArkUI.ArkUI.Full 238 239**Parameters** 240 241| Name| Type | Mandatory| Description | 242| ------ | ------ | ---- | -------------------------------- | 243| value | number | Yes | Number of child components to be preloaded (cached).<br>Default value: **1**| 244 245### disableSwipe<sup>8+</sup> 246 247disableSwipe(value: boolean) 248 249Sets whether to disable the swipe feature. 250 251**Widget capability**: This API can be used in ArkTS widgets since API version 10. 252 253**Atomic service API**: This API can be used in atomic services since API version 11. 254 255**System capability**: SystemCapability.ArkUI.ArkUI.Full 256 257**Parameters** 258 259| Name| Type | Mandatory| Description | 260| ------ | ------- | ---- | ---------------------------------------- | 261| value | boolean | Yes | Whether to disable the swipe feature. The value **true** means to disable the feature, and **false** means the opposite.<br>Default value: **false**| 262 263### curve<sup>8+</sup> 264 265curve(value: Curve | string | ICurve) 266 267Sets the animation curve. The interpolating spring 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](../js-apis-curve.md) module. 268 269**Widget capability**: This API can be used in ArkTS widgets since API version 10. 270 271**Atomic service API**: This API can be used in atomic services since API version 11. 272 273**System capability**: SystemCapability.ArkUI.ArkUI.Full 274 275**Parameters** 276 277| Name| Type | Mandatory| Description | 278| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------- | 279| value | [Curve](ts-appendix-enums.md#curve) \| string \| [ICurve](../js-apis-curve.md#icurve9)<sup>10+</sup> | Yes | Animation curve.<br>Default value: **interpolatingSpring(-1, 1, 328, 34)**| 280 281### indicatorStyle<sup>(deprecated)</sup> 282 283indicatorStyle(value?: IndicatorStyle) 284 285Sets the style of the navigation point indicator. 286 287This API is supported since API version 8 and is deprecated since API version 10. You are advised to use [indicator](#indicator10) instead. 288 289**System capability**: SystemCapability.ArkUI.ArkUI.Full 290 291**Parameters** 292 293| Name| Type | Mandatory| Description | 294| ------ | --------------------------------------------------- | ---- | ------------ | 295| value | [IndicatorStyle](#indicatorstyledeprecated) | No | Style of the navigation point indicator.| 296 297### displayCount<sup>8+</sup> 298 299displayCount(value: number | string | SwiperAutoFill, swipeByGroup?: boolean) 300 301Sets the number of elements to display per page. 302 303For the string type, this attribute can only be set to **'auto'**. 304 305If the value is set to a number less than or equal to 0, the default value **1** is used. 306 307If 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. 308 309If the value is of the SwiperAutoFill type, the system automatically works out the value based on the width and **minSize** settings of the **Swiper** component. If **minSize** is left empty or set to a value less than or equal to 0, the **Swiper** component displays one column. 310 311With page turning by group, placeholders are used if the number of child elements in the last group is less than the value of **displayCount**. Such placeholders are used to reserve space in the layout and does not display any content. The background style of the **Swiper** is applied to where the placeholders are displayed. 312 313With page turning by group, the drag distance threshold for page turning is half of the width of the **Swiper** component. (With page turning by child element, the threshold is half of the width of the child element.) 314 315**Widget capability**: This API can be used in ArkTS widgets since API version 10. 316 317**Atomic service API**: This API can be used in atomic services since API version 11. 318 319**System capability**: SystemCapability.ArkUI.ArkUI.Full 320 321**Parameters** 322 323| Name | Type | Mandatory| Description | 324| -------------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 325| value | number \| string \| [SwiperAutoFill](#swiperautofill10)<sup>10+</sup> | Yes | Number of elements to display per page.<br> Default value: **1** | 326| swipeByGroup<sup>11+</sup> | boolean | No | Whether to turn pages by group. The value **true** means to turn pages by group, and **false** means to turn pages by child element. With page turning by group, the number of child elements per group is the value of **displayCount**.<br> Default value: **false**| 327 328### effectMode<sup>8+</sup> 329 330effectMode(value: EdgeEffect) 331 332Sets the effect used when the component is at one of the edges. This attribute takes effect when **loop** is set to **false**. For details about the supported effects, see the **EdgeEffect** enums. The spring effect does not take effect when the controller API is called. 333 334**Widget capability**: This API can be used in ArkTS widgets since API version 10. 335 336**Atomic service API**: This API can be used in atomic services since API version 11. 337 338**System capability**: SystemCapability.ArkUI.ArkUI.Full 339 340**Parameters** 341 342| Name| Type | Mandatory| Description | 343| ------ | --------------------------------------------- | ---- | -------------------------------------------- | 344| value | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Yes | Effect used when the component is at one of the edges.<br>Default value: **EdgeEffect.Spring**| 345 346### displayArrow<sup>10+</sup> 347 348displayArrow(value: ArrowStyle | boolean, isHoverShow?: boolean) 349 350Sets the arrow style of the navigation point indicator. 351 352**Atomic service API**: This API can be used in atomic services since API version 11. 353 354**System capability**: SystemCapability.ArkUI.ArkUI.Full 355 356**Parameters** 357 358| Name | Type | Mandatory| Description | 359| -------------------------- | ------------------------------------------------ | ---- | ------------------------------------------------------------ | 360| value | [ArrowStyle](#arrowstyle10) \| boolean | Yes | Arrow and background to set. In cases of exceptions, the default values in the **ArrowStyle** object are used. The value **true** means to show the arrow and background in the default styles, and **false** means to hide the arrow and background.<br>Default value: **false**| 361| isHoverShow | boolean | No | 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.| 362 363> **NOTE** 364> 365> When all child nodes fit within the viewport, resulting in only one screen's worth of content being visible, the **Swiper** component displays only that screen without any left or right page-turning arrows. 366 367### nextMargin<sup>10+</sup> 368 369nextMargin(value: Length, ignoreBlank?:boolean) 370 371Sets the next margin, used to reveal a small part of the next item. This attribute is effective only when the layout mode of the child components in **Swiper** is set to stretch, which mainly includes two scenarios: 1. **displayMode** is set to **SwiperDisplayMode.STRETCH**; 2. **displayCount** is assigned a numeric value. 372 373When the main axis runs horizontally and either the next margin or previous margin is greater than the measured width of the child component, neither the next margin nor previous margin is displayed. 374 375When the main axis runs vertically and either the next margin or previous margin is greater than the measured height of the child component, neither the next margin nor previous margin is displayed. 376 377**Atomic service API**: This API can be used in atomic services since API version 11. 378 379**System capability**: SystemCapability.ArkUI.ArkUI.Full 380 381**Parameters** 382 383| Name| Type | Mandatory| Description | 384| ------ | ---------------------------- | ---- | ---------------------- | 385| value | [Length](ts-types.md#length) | Yes | Next margin.<br>Default value: **0**| 386| ignoreBlank<sup>12+</sup> | boolean | No | Whether to hide (ignore) the next margin on the last page in non-loop scenarios.<br> **true**: The last page does not show the next margin, and the right edge of the last page is aligned with that of the **Swiper**'s viewable area.<br>**false**: The last page displays the next margin, and the distance between the right edge of the last page and that of the **Swiper**'s viewable area is equal to the next margin.<br>Default value: **false**<br>**NOTE**<br>On the last page, the values of **prevMargin** and **nextMargin** are added to create a left margin that allows the previous page to be displayed partially.| 387 388### prevMargin<sup>10+</sup> 389 390prevMargin(value: Length, ignoreBlank?:boolean) 391 392Sets the previous margin, used to reveal a small part of the previous item. This attribute is effective only when the layout mode of the child components in **Swiper** is set to stretch, which mainly includes two scenarios: 1. **displayMode** is set to **SwiperDisplayMode.STRETCH**; 2. **displayCount** is assigned a numeric value. 393 394When the main axis runs horizontally and either the next margin or previous margin is greater than the measured width of the child component, neither the next margin nor previous margin is displayed. 395 396When the main axis runs vertically and either the next margin or previous margin is greater than the measured height of the child component, neither the next margin nor previous margin is displayed. 397 398**Atomic service API**: This API can be used in atomic services since API version 11. 399 400**System capability**: SystemCapability.ArkUI.ArkUI.Full 401 402**Parameters** 403 404| Name| Type | Mandatory| Description | 405| ------ | ---------------------------- | ---- | ---------------------- | 406| value | [Length](ts-types.md#length) | Yes | Previous margin.<br>Default value: **0**| 407| ignoreBlank<sup>12+</sup> | boolean | No | Whether to hide (ignore) the previous margin on the first page in non-loop scenarios.<br> **true**: The first page does not show the previous margin, and the left edge of the first page is align with that of the **Swiper**'s viewable area.<br>**false**: The first page displays the previous margin, and the distance between the left edge of the first page and that of the **Swiper**'s viewable area is equal to the previous margin.<br>Default value: **false**<br>**NOTE**<br>On the first page, the values of **prevMargin** and **nextMargin** are added to create a right margin that allows the next page to be displayed partially.| 408 409### nestedScroll<sup>11+</sup> 410 411nestedScroll(value: SwiperNestedScrollMode) 412 413Sets the nested scrolling mode of the **Swiper** component and its parent container. When **loop** is set to **true**, the **Swiper** component has no edge effect and does not trigger nested scrolling of its parent container. 414 415**Atomic service API**: This API can be used in atomic services since API version 11. 416 417**System capability**: SystemCapability.ArkUI.ArkUI.Full 418 419**Parameters** 420 421| Name| Type | Mandatory| Description | 422| ------ | ----------------------------------------------------------- | ---- | ------------------------------------------------------------ | 423| value | [SwiperNestedScrollMode](#swipernestedscrollmode11) | Yes | Nested scrolling mode of the **Swiper** component and its parent container.<br>Default value: **SwiperNestedScrollMode.SELF_ONLY**| 424 425> **NOTE** 426> 427> The **Swiper** component's flick animation logic differs from other scrollable components, as **Swiper** can only slide one page at a time and performs a page-flip animation during a flick. When a **Swiper** component is nested with other scrollable components, it will not accept the scroll offset values transmitted by its child nodes after its page-turning animation has already started. At this point, the page-turning animation of the **Swiper** and the edge effect animation of the child node will be executed simultaneously. 428 429### indicatorInteractive<sup>12+</sup> 430 431indicatorInteractive(value: boolean) 432 433Sets whether the navigation point indicator is interactive. The value **true** means that the navigation point indicator is interactive. 434 435**Atomic service API**: This API can be used in atomic services since API version 12. 436 437**System capability**: SystemCapability.ArkUI.ArkUI.Full 438 439**Parameters** 440 441| Name| Type | Mandatory| Description | 442| ------ | ----------------------------------------------------------- | ---- | ------------------------------------------------------------ | 443| value | boolean | Yes | Whether the navigation point indicator is interactive.<br>Default value: **true**| 444 445## IndicatorStyle<sup>(deprecated)</sup> 446 447This API is supported since API version 8 and is deprecated since API version 10. You are advised to use [indicator](#indicator10) instead. 448 449**System capability**: SystemCapability.ArkUI.ArkUI.Full 450 451| Name | Type | Mandatory| Description | 452| ------------- | ------------------------------------------ | ---- | ---------------------------------------------------- | 453| left | [Length](ts-types.md#length) | No | Position of the navigation point indicator relative to the left edge of the **Swiper** component.<br>If neither **left** nor **right** is set, the navigation point indicator is centered along the main axis based on its own size and the size of the **Swiper** component.<br>If the value specified is **0**, the navigation point indicator is placed at the position 0.<br>Priority: higher than the **right** property<br>Value range: [0, Swiper width - Navigation point indicator area width]. Values outside this range are adjusted to the nearest boundary. | 454| top | [Length](ts-types.md#length) | No | Position of the navigation point indicator relative to the top edge of the **Swiper** component.<br>If neither **top** nor **bottom** is set, the navigation point indicator is aligned at the bottom along the cross axis based on its own size and the size of the **Swiper** component, which is the same effect as setting **bottom=0**.<br>If the value specified is **0**, the navigation point indicator is placed at the position 0.<br>Priority: higher than the **bottom** property<br>Value range: [0, Swiper height - Navigation point indicator area height]. Values outside this range are adjusted to the nearest boundary. | 455| right | [Length](ts-types.md#length) | No | Position of the navigation point indicator relative to the right edge of the **Swiper** component.<br>If neither **left** nor **right** is set, the navigation point indicator is centered along the main axis based on its own size and the size of the **Swiper** component.<br>If the value specified is **0**, the navigation point indicator is placed at the position 0.<br>Priority: lower than the **left** property<br>Value range: [0, Swiper width - Navigation point indicator area width]. Values outside this range are adjusted to the nearest boundary. | 456| bottom | [Length](ts-types.md#length) | No | Position of the navigation point indicator relative to the bottom edge of the **Swiper** component.<br>If neither **top** nor **bottom** is set, the navigation point indicator is aligned at the bottom along the cross axis based on its own size and the size of the **Swiper** component, which is the same effect as setting **bottom=0**.<br>If the value specified is **0**, the navigation point indicator is placed at the position 0.<br>Priority: lower than the **top** property<br>Value range: [0, Swiper height - Navigation point indicator area height]. Values outside this range are adjusted to the nearest boundary. | 457| size | [Length](ts-types.md#length) | No | Diameter of the navigation point indicator. It cannot be set in percentage.<br>Default value: **6vp**| 458| mask | boolean | No | Whether to enable the mask for the navigation point indicator. | 459| color | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the navigation point indicator. | 460| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the selected navigation point indicator. | 461 462## SwiperDisplayMode 463 464Enumerates the modes in which elements are displayed along the main axis. 465 466**System capability**: SystemCapability.ArkUI.ArkUI.Full 467 468| Name | Description | 469| ---------------------------------- | ------------------------------------------------------------ | 470| 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.<br>**Widget capability**: This API can be used in ArkTS widgets since API version 7.| 471| 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 [Scroller.scrollTo](ts-container-scroll.md#scrollto) instead.<br>**Widget capability**: This API can be used in ArkTS widgets since API version 7.| 472| STRETCH<sup>10+</sup> | The slide width of the **Swiper** component is equal to the width of the component.<br>**Widget capability**: This API can be used in ArkTS widgets since API version 10.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 473| AUTO_LINEAR<sup>(deprecated)</sup> | The slide width of the **Swiper** component is equal to the width of the leftmost child component in the viewport.<br>This API is supported since API version 10 and is deprecated since API version 12. You are advised to use [Scroller.scrollTo](ts-container-scroll.md#scrollto) instead.<br>**Widget capability**: This API can be used in ArkTS widgets since API version 10.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 474 475## SwiperNestedScrollMode<sup>11+</sup> 476 477Enumerates the nested scrolling modes of the **Swiper** component and its parent container. 478 479**Atomic service API**: This API can be used in atomic services since API version 11. 480 481**System capability**: SystemCapability.ArkUI.ArkUI.Full 482 483| Name | Value| Description | 484| ------------ | -- | ---------------------------------------- | 485| SELF_ONLY | 0 | 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.| 486| SELF_FIRST | 1 | 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.| 487 488## SwiperController 489 490Controller of the **Swiper** component. You can bind this object to the **Swiper** component and use it to control page switching. 491 492**Widget capability**: This API can be used in ArkTS widgets since API version 10. 493 494**Atomic service API**: This API can be used in atomic services since API version 11. 495 496**System capability**: SystemCapability.ArkUI.ArkUI.Full 497 498### Objects to Import 499 500```ts 501let controller: SwiperController = new SwiperController() 502``` 503 504### constructor 505 506constructor() 507 508A constructor used to create a **SwiperController** object. 509 510**Widget capability**: This API can be used in ArkTS widgets since API version 10. 511 512**Atomic service API**: This API can be used in atomic services since API version 11. 513 514**System capability**: SystemCapability.ArkUI.ArkUI.Full 515 516### showNext 517 518showNext() 519 520Turns to the next page. Page turning occurs with the animation, whose duration is specified by **duration**. 521 522**Widget capability**: This API can be used in ArkTS widgets since API version 10. 523 524**Atomic service API**: This API can be used in atomic services since API version 11. 525 526**System capability**: SystemCapability.ArkUI.ArkUI.Full 527 528### showPrevious 529 530showPrevious() 531 532Turns to the previous page. Page turning occurs with the animation, whose duration is specified by **duration**. 533 534**Widget capability**: This API can be used in ArkTS widgets since API version 10. 535 536**Atomic service API**: This API can be used in atomic services since API version 11. 537 538**System capability**: SystemCapability.ArkUI.ArkUI.Full 539 540### changeIndex<sup>12+</sup> 541 542changeIndex(index: number, useAnimation?: boolean) 543 544Goes to a specified page. 545 546**Widget capability**: This API can be used in ArkTS widgets since API version 12. 547 548**Atomic service API**: This API can be used in atomic services since API version 12. 549 550**System capability**: SystemCapability.ArkUI.ArkUI.Full 551 552**Parameters** 553 554| Name | Type | Mandatory | Description | 555| -------- | ---------- | ---- | -------- | 556| index| number | Yes | Index of the target page in the **Swiper** component.<br>**NOTE**<br>If the value specified is less than 0 or greater than the maximum page index, the value **0** is used.| 557| useAnimation| boolean | No | Whether to use an animation for when the target page is reached. The value **true** means to use an animation, and **false** means the opposite.<br>Default value: **false**| 558 559### finishAnimation 560 561finishAnimation(callback?: VoidCallback) 562 563Stops an animation. 564 565**Widget capability**: This API can be used in ArkTS widgets since API version 10. 566 567**Atomic service API**: This API can be used in atomic services since API version 11. 568 569**System capability**: SystemCapability.ArkUI.ArkUI.Full 570 571**Parameters** 572 573| Name | Type | Mandatory | Description | 574| -------- | ---------- | ---- | -------- | 575| callback | [VoidCallback](./ts-types.md#voidcallback12) | No | Callback invoked when the animation stops.| 576 577## Indicator<sup>10+</sup> 578 579Sets the distance between the navigation point indicator and the **Swiper** component. Note that due to its default interaction area height of 32 vp, the navigation point indicator cannot be placed flush against the bottom edge. 580 581**Widget capability**: This API can be used in ArkTS widgets since API version 10. 582 583**Atomic service API**: This API can be used in atomic services since API version 11. 584 585**System capability**: SystemCapability.ArkUI.ArkUI.Full 586 587### left 588 589left(value: Length): T 590 591Sets the position of the navigation point indicator relative to the left edge of the **Swiper** component. 592 593**Widget capability**: This API can be used in ArkTS widgets since API version 10. 594 595**Atomic service API**: This API can be used in atomic services since API version 11. 596 597**System capability**: SystemCapability.ArkUI.ArkUI.Full 598 599**Parameters** 600 601| Name| Type | Mandatory| Description | 602| ------ | ---------------------------- | ---- | ------------------------------------------------------------ | 603| value | [Length](ts-types.md#length) | Yes | Position of the navigation point indicator relative to the left edge of the **Swiper** component.<br>If neither **left** nor **right** is set, the navigation point indicator is centered along the main axis based on its own size and the size of the **Swiper** component.<br>If the value specified is **0**, the navigation point indicator is placed at the position 0.<br>Priority: higher than the **right** property<br>Value range: [0, Swiper width - Navigation point indicator area width]. Values outside this range are adjusted to the nearest boundary.| 604 605### top 606 607top(value: Length): T 608 609Sets the position of the navigation point indicator relative to the top edge of the **Swiper** component. 610 611**Widget capability**: This API can be used in ArkTS widgets since API version 10. 612 613**Atomic service API**: This API can be used in atomic services since API version 11. 614 615**System capability**: SystemCapability.ArkUI.ArkUI.Full 616 617**Parameters** 618 619| Name| Type | Mandatory| Description | 620| ------ | ---------------------------- | ---- | ------------------------------------------------------------ | 621| value | [Length](ts-types.md#length) | Yes | Position of the navigation point indicator relative to the top edge of the **Swiper** component.<br>If neither **top** nor **bottom** is set, the navigation point indicator is aligned at the bottom along the cross axis based on its own size and the size of the **Swiper** component, which is the same effect as setting **bottom=0**.<br>If the value specified is **0**, the navigation point indicator is placed at the position 0.<br>Priority: higher than the **bottom** property<br>Value range: [0, Swiper height - Navigation point indicator area height]. Values outside this range are adjusted to the nearest boundary.| 622 623### right 624 625right(value: Length): T 626 627Sets the position of the navigation point indicator relative to the right edge of the **Swiper** component. 628 629**Widget capability**: This API can be used in ArkTS widgets since API version 10. 630 631**Atomic service API**: This API can be used in atomic services since API version 11. 632 633**System capability**: SystemCapability.ArkUI.ArkUI.Full 634 635**Parameters** 636 637| Name| Type | Mandatory| Description | 638| ------ | ---------------------------- | ---- | ------------------------------------------------------------ | 639| value | [Length](ts-types.md#length) | Yes | Sets the position of the navigation point indicator relative to the right edge of the **Swiper** component.<br>If neither **left** nor **right** is set, the navigation point indicator is centered along the main axis based on its own size and the size of the **Swiper** component.<br>If the value specified is **0**, the navigation point indicator is placed at the position 0.<br>Priority: lower than the **left** property<br>Value range: [0, Swiper width - Navigation point indicator area width]. Values outside this range are adjusted to the nearest boundary.| 640 641### bottom 642 643bottom(value: Length): T 644 645Sets the position of the navigation point indicator relative to the bottom edge of the **Swiper** component. 646 647**Widget capability**: This API can be used in ArkTS widgets since API version 10. 648 649**Atomic service API**: This API can be used in atomic services since API version 11. 650 651**System capability**: SystemCapability.ArkUI.ArkUI.Full 652 653**Parameters** 654 655| Name| Type | Mandatory| Description | 656| ------ | ---------------------------- | ---- | ------------------------------------------------------------ | 657| value | [Length](ts-types.md#length) | Yes | Position of the navigation point indicator relative to the bottom edge of the **Swiper** component.<br>If neither **top** nor **bottom** is set, the navigation point indicator is aligned at the bottom along the cross axis based on its own size and the size of the **Swiper** component, which is the same effect as setting **bottom=0**.<br>If the value specified is **0**, the navigation point indicator is placed at the position 0.<br>Priority: lower than the **top** property<br>Value range: [0, Swiper height - Navigation point indicator area height]. Values outside this range are adjusted to the nearest boundary.| 658 659### start<sup>12+</sup> 660 661start(value: LengthMetrics): T 662 663Sets the distance between the navigation point indicator and the right edge (in right-to-left scripts) or the left edge (in left-to-right scripts) of the **Swiper** component. 664 665**Widget capability**: This API can be used in ArkTS widgets since API version 12. 666 667**Atomic service API**: This API can be used in atomic services since API version 12. 668 669**System capability**: SystemCapability.ArkUI.ArkUI.Full 670 671**Parameters** 672 673| Name| Type | Mandatory| Description | 674| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 675| value | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | Yes | Distance between the navigation point indicator and the right edge (in right-to-left scripts) or the left edge (in left-to-right scripts) of the **Swiper** component.<br>Default value: **0**<br>Unit: vp| 676 677### end<sup>12+</sup> 678 679end(value: LengthMetrics): T 680 681Sets the distance between the navigation point indicator and the left edge (in right-to-left scripts) or the right edge (in left-to-right scripts) of the **Swiper** component. 682 683**Widget capability**: This API can be used in ArkTS widgets since API version 12. 684 685**Atomic service API**: This API can be used in atomic services since API version 12. 686 687**System capability**: SystemCapability.ArkUI.ArkUI.Full 688 689**Parameters** 690 691| Name| Type | Mandatory | Description | 692| ------ | ---------------------------- | ---- | ---------------------------------------- | 693| value | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | Yes | Distance between the navigation point indicator and the left edge (in right-to-left scripts) or the right edge (in left-to-right scripts) of the **Swiper** component.<br>Default value: **0**<br>Unit: vp<br>**Widget capability**: This API can be used in ArkTS widgets since API version 12.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 694 695### dot 696 697static dot(): DotIndicator 698 699Returns a **DotIndicator** object. 700 701**Widget capability**: This API can be used in ArkTS widgets since API version 10. 702 703**Atomic service API**: This API can be used in atomic services since API version 11. 704 705**System capability**: SystemCapability.ArkUI.ArkUI.Full 706 707### digit 708 709static digit(): DigitIndicator 710 711Returns **DigitIndicator** object. 712 713**Widget capability**: This API can be used in ArkTS widgets since API version 10. 714 715**Atomic service API**: This API can be used in atomic services since API version 11. 716 717**System capability**: SystemCapability.ArkUI.ArkUI.Full 718 719## DotIndicator<sup>10+</sup> 720 721Defines a dot-style navigation point indicator. Inherits [Indicator](#indicator10). 722 723**Atomic service API**: This API can be used in atomic services since API version 11. 724 725**System capability**: SystemCapability.ArkUI.ArkUI.Full 726 727### itemWidth 728 729itemWidth(value: Length): DotIndicator 730 731Sets the width of the dot-style navigation point indicator. This parameter cannot be set in percentage. 732 733**Widget capability**: This API can be used in ArkTS widgets since API version 10. 734 735**Atomic service API**: This API can be used in atomic services since API version 11. 736 737**System capability**: SystemCapability.ArkUI.ArkUI.Full 738 739**Parameters** 740 741| Name| Type | Mandatory| Description | 742| ------ | ---------------------------- | ---- | ------------------------------------------------------------ | 743| value | [Length](ts-types.md#length) | Yes | Width of the dot-style navigation point indicator. This parameter cannot be set in percentage.<br>Default value: **6**<br>Unit: vp| 744 745**Return value** 746 747| Type | Description | 748| ------------------------------- | ------------ | 749| [DotIndicator](#dotindicator10) | Dot-style navigation point indicator.| 750 751### itemHeight 752 753itemHeight(value: Length): DotIndicator 754 755Sets the height of the dot-style navigation point indicator. This parameter cannot be set in percentage. 756 757**Widget capability**: This API can be used in ArkTS widgets since API version 10. 758 759**Atomic service API**: This API can be used in atomic services since API version 11. 760 761**System capability**: SystemCapability.ArkUI.ArkUI.Full 762 763**Parameters** 764 765| Name| Type | Mandatory| Description | 766| ------ | ---------------------------- | ---- | ------------------------------------------------------------ | 767| value | [Length](ts-types.md#length) | Yes | Height of the dot-style navigation point indicator. This parameter cannot be set in percentage.<br>Default value: **6**<br>Unit: vp| 768 769**Return value** 770 771| Type | Description | 772| ------------------------------- | ------------ | 773| [DotIndicator](#dotindicator10) | Dot-style navigation point indicator.| 774 775### selectedItemWidth 776 777selectedItemWidth(value: Length): DotIndicator 778 779Sets the width of the selected dot in the dot-style navigation point indicator. This parameter cannot be set in percentage. 780 781**Widget capability**: This API can be used in ArkTS widgets since API version 10. 782 783**Atomic service API**: This API can be used in atomic services since API version 11. 784 785**System capability**: SystemCapability.ArkUI.ArkUI.Full 786 787**Parameters** 788 789| Name| Type | Mandatory| Description | 790| ------ | ---------------------------- | ---- | ------------------------------------------------------------ | 791| value | [Length](ts-types.md#length) | Yes | Width of the selected dot in the dot-style navigation point indicator. This parameter cannot be set in percentage.<br>Default value: **12**<br>Unit: vp| 792 793**Return value** 794 795| Type | Description | 796| ------------------------------- | ------------ | 797| [DotIndicator](#dotindicator10) | Dot-style navigation point indicator.| 798 799### selectedItemHeight 800 801selectedItemHeight(value: Length): DotIndicator 802 803Sets the height of the selected dot in the dot-style navigation point indicator. This parameter cannot be set in percentage. 804 805**Widget capability**: This API can be used in ArkTS widgets since API version 10. 806 807**Atomic service API**: This API can be used in atomic services since API version 11. 808 809**System capability**: SystemCapability.ArkUI.ArkUI.Full 810 811**Parameters** 812 813| Name| Type | Mandatory| Description | 814| ------ | ---------------------------- | ---- | ------------------------------------------------------------ | 815| value | [Length](ts-types.md#length) | Yes | Height of the selected dot in the dot-style navigation point indicator. This parameter cannot be set in percentage.<br>Default value: **6**<br>Unit: vp| 816 817**Return value** 818 819| Type | Description | 820| ------------------------------- | ------------ | 821| [DotIndicator](#dotindicator10) | Dot-style navigation point indicator.| 822 823### mask 824 825mask(value: boolean): DotIndicator 826 827Sets whether to enable the mask for the dot-style navigation point indicator. 828 829**Widget capability**: This API can be used in ArkTS widgets since API version 10. 830 831**Atomic service API**: This API can be used in atomic services since API version 11. 832 833**System capability**: SystemCapability.ArkUI.ArkUI.Full 834 835**Parameters** 836 837| Name| Type | Mandatory| Description | 838| ------ | ------- | ---- | ------------------------------------------------------------ | 839| value | boolean | Yes | Whether to enable the mask for the dot-style navigation point indicator.<br>Default value: **false**| 840 841**Return value** 842 843| Type | Description | 844| ------------------------------- | ------------ | 845| [DotIndicator](#dotindicator10) | Dot-style navigation point indicator.| 846 847### color 848 849color(value: ResourceColor): DotIndicator 850 851Sets the color of the dot-style navigation point indicator. 852 853**Widget capability**: This API can be used in ArkTS widgets since API version 10. 854 855**Atomic service API**: This API can be used in atomic services since API version 11. 856 857**System capability**: SystemCapability.ArkUI.ArkUI.Full 858 859**Parameters** 860 861| Name| Type | Mandatory| Description | 862| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 863| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Color of the dot-style navigation point indicator.<br>Default value: **'\#182431'** (10% opacity)| 864 865**Return value** 866 867| Type | Description | 868| ------------------------------- | ------------ | 869| [DotIndicator](#dotindicator10) | Dot-style navigation point indicator.| 870 871### selectedColor 872 873selectedColor(value: ResourceColor): DotIndicator 874 875Sets the color of the selected dot in the dot-style navigation point indicator. 876 877**Widget capability**: This API can be used in ArkTS widgets since API version 10. 878 879**Atomic service API**: This API can be used in atomic services since API version 11. 880 881**System capability**: SystemCapability.ArkUI.ArkUI.Full 882 883**Parameters** 884 885| Name| Type | Mandatory| Description | 886| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 887| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Color of the selected dot in the dot-style navigation point indicator.<br>Default value: **'\#007DFF'**| 888 889**Return value** 890 891| Type | Description | 892| ------------------------------- | ------------ | 893| [DotIndicator](#dotindicator10) | Dot-style navigation point indicator.| 894 895### maxDisplayCount<sup>12+</sup> 896 897maxDisplayCount(maxDisplayCount: number): DotIndicator 898 899Sets the maximum number of navigation dots in the dot-style navigation point indicator. 900 901**Atomic service API**: This API can be used in atomic services since API version 12. 902 903**System capability**: SystemCapability.ArkUI.ArkUI.Full 904 905**Parameters** 906 907| Name | Type | Mandatory| Description | 908| --------------- | ------ | ---- | ------------------------------------------------------------ | 909| maxDisplayCount | number | Yes | Maximum number of navigation dots in the dot-style navigation point indicator. If the actual number of navigation dots exceeds this limit, the overflow effect is activated, as shown in Example 5.<br>This parameter has no default value. If an invalid value is set, no overflow effect is applied.<br>Value range: 6–9<br>**NOTE**<br>In scenarios involving overflow display:<br>1. Interactive features, such as gestures and mouse operations, are not supported.<br>2. The position of the selected navigation dot corresponding to the middle page is not strictly fixed; it depends on the sequence of previous page-turning operations.| 910 911**Return value** 912 913| Type | Description | 914| ------------------------------- | ------------ | 915| [DotIndicator](#dotindicator10) | Dot-style navigation point indicator.| 916 917### constructor 918 919constructor() 920 921A constructor used to create a **DotIndicator** object. 922 923**Widget capability**: This API can be used in ArkTS widgets since API version 10. 924 925**Atomic service API**: This API can be used in atomic services since API version 11. 926 927**System capability**: SystemCapability.ArkUI.ArkUI.Full 928 929>**NOTE** 930> 931>When pressed, the navigation point indicator is zoomed in to 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**. 932 933## DigitIndicator<sup>10+</sup> 934 935Defines a digit-style navigation point indicator. Inherits [Indicator](#indicator10). 936 937**Widget capability**: This API can be used in ArkTS widgets since API version 10. 938 939**Atomic service API**: This API can be used in atomic services since API version 11. 940 941**System capability**: SystemCapability.ArkUI.ArkUI.Full 942 943>**NOTE** 944> 945>When pages are turned by group, the child nodes displayed in the digit-style navigation point indicator do not count placeholder nodes.<br> 946>The maximum value of [maxFontScale](ts-basic-components-text.md#maxfontscale12) for the digit-style navigation point indicator is 2. 947 948### fontColor 949 950fontColor(value: ResourceColor): DigitIndicator 951 952Sets the font color of the digit-style navigation point indicator. 953 954**Widget capability**: This API can be used in ArkTS widgets since API version 10. 955 956**Atomic service API**: This API can be used in atomic services since API version 11. 957 958**System capability**: SystemCapability.ArkUI.ArkUI.Full 959 960**Parameters** 961 962| Name| Type | Mandatory| Description | 963| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 964| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Font color of the digit-style navigation point indicator.<br>Default value: **'\#ff182431'**| 965 966**Return value** 967 968| Type | Description | 969| ----------------------------------- | ------------ | 970| [DigitIndicator](#digitindicator10) | Digit-style navigation point indicator.| 971 972### selectedFontColor 973 974selectedFontColor(value: ResourceColor): DigitIndicator 975 976Sets the font color of the selected digit in the digit-style navigation point indicator. 977 978**Widget capability**: This API can be used in ArkTS widgets since API version 10. 979 980**Atomic service API**: This API can be used in atomic services since API version 11. 981 982**System capability**: SystemCapability.ArkUI.ArkUI.Full 983 984**Parameters** 985 986| Name| Type | Mandatory| Description | 987| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 988| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Font color of the selected digit in the digit-style navigation point indicator.<br>Default value: **'\#ff182431'**| 989 990**Return value** 991 992| Type | Description | 993| ----------------------------------- | ------------ | 994| [DigitIndicator](#digitindicator10) | Digit-style navigation point indicator.| 995 996### digitFont 997 998digitFont(value: Font): DigitIndicator 999 1000Sets the font style of the digit-style navigation point indicator. 1001 1002**Widget capability**: This API can be used in ArkTS widgets since API version 10. 1003 1004**Atomic service API**: This API can be used in atomic services since API version 11. 1005 1006**System capability**: SystemCapability.ArkUI.ArkUI.Full 1007 1008**Parameters** 1009 1010| Name| Type | Mandatory| Description | 1011| ------ | ------------------------ | ---- | ------------------------------------------------------------ | 1012| value | [Font](ts-types.md#font) | Yes | Font style of the digit-style navigation point indicator.<br>Only the **size** and **weight** parameters in **Font** are adjustable. Setting **family** and **style** has no effect.<br>Default value:<br>{ size: 14, weight: FontWeight.Normal } | 1013 1014**Return value** 1015 1016| Type | Description | 1017| ----------------------------------- | ------------ | 1018| [DigitIndicator](#digitindicator10) | Digit-style navigation point indicator.| 1019 1020### selectedDigitFont 1021 1022selectedDigitFont(value: Font): DigitIndicator 1023 1024Sets the font style of the selected digit in the digit-style navigation point indicator. 1025 1026**Widget capability**: This API can be used in ArkTS widgets since API version 10. 1027 1028**Atomic service API**: This API can be used in atomic services since API version 11. 1029 1030**System capability**: SystemCapability.ArkUI.ArkUI.Full 1031 1032**Parameters** 1033 1034| Name| Type | Mandatory| Description | 1035| ------ | ------------------------ | ---- | ------------------------------------------------------------ | 1036| value | [Font](ts-types.md#font) | Yes | Font style of the selected digit in the digit-style navigation point indicator.<br>Default value:<br>{ size: 14, weight: FontWeight.Normal } | 1037 1038>**NOTE** 1039> 1040> When pages are turned by group, the child nodes displayed in the digit-style navigation point indicator do not count placeholder nodes. 1041 1042**Return value** 1043 1044| Type | Description | 1045| ----------------------------------- | ------------ | 1046| [DigitIndicator](#digitindicator10) | Digit-style navigation point indicator.| 1047 1048### constructor 1049 1050constructor() 1051 1052A constructor used to create a **DigitIndicator** object. 1053 1054**Widget capability**: This API can be used in ArkTS widgets since API version 10. 1055 1056**Atomic service API**: This API can be used in atomic services since API version 11. 1057 1058**System capability**: SystemCapability.ArkUI.ArkUI.Full 1059 1060## ArrowStyle<sup>10+</sup> 1061Describes the left and right arrow attributes. 1062 1063**Atomic service API**: This API can be used in atomic services since API version 11. 1064 1065**System capability**: SystemCapability.ArkUI.ArkUI.Full 1066 1067| Name | Type | Mandatory | Description | 1068| ---------------- | ---------------------------------------- | ---- | ---------------------------------------- | 1069| showBackground | boolean | No | Whether to show the background for the arrow.<br>Default value: **false** | 1070| isSidebarMiddle | boolean | No | Whether the arrow is shown on either side of the navigation point indicator.<br>Default value: **false**<br>(the arrow is shown on either side of the navigation point indicator)| 1071| 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.| 1072| 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'**| 1073| 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.| 1074| arrowColor | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the arrow.<br>Default value: **'\#182431'** | 1075 1076## SwiperAutoFill<sup>10+</sup> 1077 1078Describes the auto-fill attribute. 1079 1080**Widget capability**: This API can be used in ArkTS widgets since API version 10. 1081 1082**Atomic service API**: This API can be used in atomic services since API version 11. 1083 1084**System capability**: SystemCapability.ArkUI.ArkUI.Full 1085 1086| Name | Type | Mandatory| Description | 1087| ------- | -------------------- | ------ | ------------------------------------ | 1088| minSize | [VP](ts-types.md#vp10) | Yes | Minimum width of the element.<br>Default value: **0**| 1089 1090## Events 1091 1092In addition to the [universal events](ts-universal-events-click.md), the following events are supported. 1093 1094### onChange 1095 1096onChange(event: (index: number) => void) 1097 1098Triggered when the index of the currently displayed child component changes. The return value is the index of the currently displayed child component. 1099 1100When the **Swiper** component is used together with **LazyForEach**, the subpage UI update cannot be triggered in the **onChange** event. 1101 1102**Widget capability**: This API can be used in ArkTS widgets since API version 10. 1103 1104**Atomic service API**: This API can be used in atomic services since API version 11. 1105 1106**System capability**: SystemCapability.ArkUI.ArkUI.Full 1107 1108**Parameters** 1109 1110| Name| Type | Mandatory| Description | 1111| ------ | ------ | ---- | -------------------- | 1112| index | number | Yes | Index of the currently displayed element.| 1113 1114### onAnimationStart<sup>9+</sup> 1115 1116onAnimationStart(event: (index: number, targetIndex: number, extraInfo: SwiperAnimationEvent) => void) 1117 1118Triggered when the switching animation starts. 1119 1120**Widget capability**: This API can be used in ArkTS widgets since API version 10. 1121 1122**Atomic service API**: This API can be used in atomic services since API version 11. 1123 1124**System capability**: SystemCapability.ArkUI.ArkUI.Full 1125 1126**Parameters** 1127 1128| Name | Type | Mandatory| Description | 1129| ------------------------- | ---------------------------------------------------------- | ---- | ------------------------------------------------------------ | 1130| index | number | Yes | Index of the currently displayed element. | 1131| targetIndex<sup>10+</sup> | number | Yes | Index of the target element to switch to. | 1132| extraInfo<sup>10+</sup> | [SwiperAnimationEvent](#swiperanimationevent10) | Yes | 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.| 1133 1134>**NOTE** 1135> 1136>- When the duration of the switching animation is set to 0, this callback is triggered only in the following scenarios: swiping to turn pages, automatic playback, calling **SwiperController.showNext()** or **SwiperController.showPrevious()**, and touching navigation points to navigate. 1137 1138### onAnimationEnd<sup>9+</sup> 1139 1140onAnimationEnd(event: (index: number, extraInfo: SwiperAnimationEvent) => void) 1141 1142Triggered when the switching animation ends. 1143 1144This 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. 1145 1146**Widget capability**: This API can be used in ArkTS widgets since API version 10. 1147 1148**Atomic service API**: This API can be used in atomic services since API version 11. 1149 1150**System capability**: SystemCapability.ArkUI.ArkUI.Full 1151 1152**Parameters** 1153 1154| Name | Type | Mandatory| Description | 1155| ----------------------- | ---------------------------------------------------------- | ---- | ------------------------------------------------------------ | 1156| index | number | Yes | Index of the currently displayed element. | 1157| extraInfo<sup>10+</sup> | [SwiperAnimationEvent](#swiperanimationevent10) | Yes | 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.| 1158 1159>**NOTE** 1160> 1161>- When the duration of the switching animation is set to 0, this callback is triggered only in the following scenarios: swiping to turn pages, automatic playback, calling **SwiperController.showNext()** or **SwiperController.showPrevious()**, and touching navigation points to navigate. 1162 1163### onGestureSwipe<sup>10+</sup> 1164 1165onGestureSwipe(event: (index: number, extraInfo: SwiperAnimationEvent) => void) 1166 1167Triggered on a frame-by-frame basis when the page is turned by a swipe. 1168 1169**Atomic service API**: This API can be used in atomic services since API version 11. 1170 1171**System capability**: SystemCapability.ArkUI.ArkUI.Full 1172 1173**Parameters** 1174 1175| Name | Type | Mandatory| Description | 1176| --------- | ---------------------------------------------------------- | ---- | ------------------------------------------------------------ | 1177| index | number | Yes | Index of the currently displayed element. | 1178| extraInfo | [SwiperAnimationEvent](#swiperanimationevent10) | Yes | 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.| 1179 1180### customContentTransition<sup>12+</sup> 1181 1182customContentTransition(transition: SwiperContentAnimatedTransition) 1183 1184Defines a custom switching animation. You can define custom animation attributes, such as **opacity**, **scale**, and **translate**, in the callback invoked on a frame-by-frame basis during the swiping-initiated page switching animation. 1185 1186Instructions: 1187 11881. This API does not work when **prevMargin** and **nextMargin** are set in such a way that the **Swiper** frontend and backend display the same page during loop playback. 11892. During the swiping-initiated page switching animation, the [SwiperContentTransitionProxy](#swipercontenttransitionproxy12) callback is invoked for all pages in the viewport on a frame-by-frame basis. For example, when there are two pages whose subscripts are 0 and 1 in the viewport, two callbacks whose indexes are 0 and 1 are invoked in each frame. 11903. When the **swipeByGroup** parameter of the **displayCount** attribute is set to **true**, the callback is invoked for all pages in a group if any page in the group is within the viewport; and all pages in a group are removed from the render tree if none of them are within the viewport. 11914. During the swiping-initiated page switching animation, the default animation (page scrolling) is still effective. If you do not want the page to scroll, you can set the **translate** attribute on the main axis to offset the page scrolling. For example, if the value of **displayCount** is **2** and there are two pages whose subscripts are 0 and 1 within the viewport, you can set the **translate** attribute on the main axis to the following on a frame-by-frame basis: **translate** for page 0 = **-position** x **mainAxisLength**; **translate** for page 1 = **-(position - 1)** x **mainAxisLength** 1192 1193**Atomic service API**: This API can be used in atomic services since API version 12. 1194 1195**System capability**: SystemCapability.ArkUI.ArkUI.Full 1196 1197**Parameters** 1198 1199| Name| Type| Mandatory| Description| 1200| ------ | ---- | ---- | ---- | 1201| transition | [SwiperContentAnimatedTransition](#swipercontentanimatedtransition12) | Yes| Information about the custom switching animation.| 1202 1203### onContentDidScroll<sup>12+</sup> 1204 1205onContentDidScroll(handler: ContentDidScrollCallback) 1206 1207Triggered when content in the **Swiper** component scrolls. 1208 1209Instructions: 1210 12111. This API does not work when **prevMargin** and **nextMargin** are set in such a way that the **Swiper** frontend and backend display the same page during loop playback. 12122. During page scrolling, the [ContentDidScrollCallback](#contentdidscrollcallback12) callback is invoked for all pages in the viewport on a frame-by-frame basis. For example, when there are two pages whose subscripts are 0 and 1 in the viewport, two callbacks whose indexes are 0 and 1 are invoked in each frame. 12133. When the **swipeByGroup** parameter of the **displayCount** attribute is set to **true**, the callback is invoked for all pages in a group if any page in the group is within the viewport. 1214 1215**Atomic service API**: This API can be used in atomic services since API version 12. 1216 1217**System capability**: SystemCapability.ArkUI.ArkUI.Full 1218 1219**Parameters** 1220 1221| Name| Type| Mandatory| Description| 1222| ------ | ---- | ---- | ---- | 1223| handler | [ContentDidScrollCallback](#contentdidscrollcallback12) | Yes| Callback triggered when content in the **Swiper** component scrolls.| 1224 1225## SwiperAnimationEvent<sup>10+</sup> 1226 1227Describes the animation information of the **Swiper** component. 1228 1229**Atomic service API**: This API can be used in atomic services since API version 11. 1230 1231**System capability**: SystemCapability.ArkUI.ArkUI.Full 1232 1233| Name | Type | Read Only| Optional| Description | 1234| ------------- | ----------- | ---- | ---- |------------------------------- | 1235| currentOffset | number | No| No| Offset of the currently displayed element relative to the start position of the **Swiper** along the main axis. Unit: vp<br>Default value: **0**| 1236| targetOffset | number | No| No| Offset of the target element relative to the start position of the **Swiper** along the main axis. Unit: vp<br>Default value: **0**| 1237| velocity | number | No| No| Hands-off velocity at the beginning of the animation. Unit: VP/S<br>Default value: **0**| 1238 1239## SwiperContentAnimatedTransition<sup>12+</sup> 1240 1241Information about the custom page switching animation. 1242 1243**Atomic service API**: This API can be used in atomic services since API version 12. 1244 1245**System capability**: SystemCapability.ArkUI.ArkUI.Full 1246 1247| Name| Type| Mandatory| Description| 1248| ------ | ---- | ---- | ---- | 1249| timeout | number | No| Timeout for the switching animation. The timeout timer starts when the default animation (page scrolling) reaches the point where the first frame is moved out of the viewport. If you do not call the **finishTransition** API of [SwiperContentTransitionProxy](#swipercontenttransitionproxy12) before the timer expires, the component considers that the custom animation of the page ends and immediately removes the page node from the render tree. The unit is ms. The default value is **0**.| 1250| transition | Callback<[SwiperContentTransitionProxy](#swipercontenttransitionproxy12)> | Yes| Content of the custom switching animation.| 1251 1252## SwiperContentTransitionProxy<sup>12+</sup> 1253 1254Implements the proxy object returned during the execution of the custom switching animation of the **Swiper** component. You can use this object to obtain the page information in the custom animation viewport. You can also call the **finishTransition** API of this object to notify the **Swiper** component that the custom animation has finished playing. 1255 1256**Atomic service API**: This API can be used in atomic services since API version 12. 1257 1258**System capability**: SystemCapability.ArkUI.ArkUI.Full 1259 1260### Attributes 1261 1262| Name| Type| Read Only| Optional| Description| 1263| ---- | ---- | --- | ---- | --- | 1264| selectedIndex | number | No| No| Index of the currently selected page.| 1265| index | number | No| No| Index of a page in the viewport.| 1266| position | number | No| No| Position of the page specified by **index** relative to the start position of the **Swiper** main axis (start position of the page corresponding to **selectedIndex**).| 1267| mainAxisLength | number | No| No| Length of the page specified by **index** along the main axis.| 1268 1269>**NOTE** 1270> 1271>- For example, when the index of the currently selected child component is 0, during a transition animation from page 0 to page 1, the callback is triggered for all pages within the viewport on every frame. When pages 0 and 1 are both in the viewport, the callback is triggered twice per frame. The first callback has **selectedIndex** as **0**, **index** as **0**, **position** as the ratio of how much page 0 has moved relative to its position before the animation started on the current frame, and **mainAxisLength** as the length of page 0 on the main axis. The second callback has **selectedIndex** as **0**, **index** as **1**, **position** as the ratio of how much page 1 has moved relative to page 0 before the animation started on the current frame, and **mainAxisLength** as the length of page 1 on the main axis. 1272> 1273>- If the animation curve is a spring interpolation curve, during the transition animation from page 0 to page 1, due to the position and velocity when the user lifts their finger off the screen, animation may overshoot and slide past to page 2, then bounce back to page 1. Throughout this process, a callback is triggered for pages 1 and 2 within the viewport on every frame. 1274 1275 1276### finishTransition<sup>12+</sup> 1277 1278finishTransition(): void 1279 1280Notifies the **Swiper** component that the custom animation has finished playing. 1281 1282**Atomic service API**: This API can be used in atomic services since API version 12. 1283 1284**System capability**: SystemCapability.ArkUI.ArkUI.Full 1285 1286## ContentDidScrollCallback<sup>12+</sup> 1287 1288type ContentDidScrollCallback = (selectedIndex: number, index: number, position: number, mainAxisLength: number) => void 1289 1290Triggered during the swipe action of the **Swiper** component. For details about the parameters, see [SwiperContentTransitionProxy](#swipercontenttransitionproxy12). 1291 1292**Atomic service API**: This API can be used in atomic services since API version 12. 1293 1294**System capability**: SystemCapability.ArkUI.ArkUI.Full 1295 1296| Name| Type| Mandatory| Description| 1297| ------ | ---- | ---- | ---- | 1298| selectedIndex | number | Yes| Index of the currently selected page.| 1299| index | number | Yes| Index of a page in the viewport.| 1300| position | number | Yes| Position of the page specified by **index** relative to the start position of the **Swiper** main axis (start position of the page corresponding to **selectedIndex**).| 1301| mainAxisLength | number | Yes| Length of the page specified by **index** along the main axis.| 1302 1303## Example 1304 1305### Example 1: Configuring Navigation Point Indicator Interaction 1306 1307This example demonstrates how to configure the interaction of the navigation point indicator using the **indicatorInteractive** API. 1308 1309```ts 1310// xxx.ets 1311class MyDataSource implements IDataSource { 1312 private list: number[] = [] 1313 1314 constructor(list: number[]) { 1315 this.list = list 1316 } 1317 1318 totalCount(): number { 1319 return this.list.length 1320 } 1321 1322 getData(index: number): number { 1323 return this.list[index] 1324 } 1325 1326 registerDataChangeListener(listener: DataChangeListener): void { 1327 } 1328 1329 unregisterDataChangeListener() { 1330 } 1331} 1332 1333@Entry 1334@Component 1335struct SwiperExample { 1336 private swiperController: SwiperController = new SwiperController() 1337 private data: MyDataSource = new MyDataSource([]) 1338 1339 aboutToAppear(): void { 1340 let list: number[] = [] 1341 for (let i = 1; i <= 10; i++) { 1342 list.push(i); 1343 } 1344 this.data = new MyDataSource(list) 1345 } 1346 1347 build() { 1348 Column({ space: 5 }) { 1349 Swiper(this.swiperController) { 1350 LazyForEach(this.data, (item: string) => { 1351 Text(item.toString()) 1352 .width('90%') 1353 .height(160) 1354 .backgroundColor(0xAFEEEE) 1355 .textAlign(TextAlign.Center) 1356 .fontSize(30) 1357 }, (item: string) => item) 1358 } 1359 .cachedCount(2) 1360 .index(1) 1361 .autoPlay(true) 1362 .interval(4000) 1363 .loop(true) 1364 .indicatorInteractive(true) 1365 .duration(1000) 1366 .itemSpace(0) 1367 .indicator( // Set the style of the navigation point indicator. 1368 new DotIndicator() 1369 .itemWidth(15) 1370 .itemHeight(15) 1371 .selectedItemWidth(15) 1372 .selectedItemHeight(15) 1373 .color(Color.Gray) 1374 .selectedColor(Color.Blue)) 1375 .displayArrow({ // Set the arrow style of the navigation point indicator. 1376 showBackground: true, 1377 isSidebarMiddle: true, 1378 backgroundSize: 24, 1379 backgroundColor: Color.White, 1380 arrowSize: 18, 1381 arrowColor: Color.Blue 1382 }, false) 1383 .curve(Curve.Linear) 1384 .onChange((index: number) => { 1385 console.info(index.toString()) 1386 }) 1387 .onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent) => { 1388 console.info("index: " + index) 1389 console.info("current offset: " + extraInfo.currentOffset) 1390 }) 1391 .onAnimationStart((index: number, targetIndex: number, extraInfo: SwiperAnimationEvent) => { 1392 console.info("index: " + index) 1393 console.info("targetIndex: " + targetIndex) 1394 console.info("current offset: " + extraInfo.currentOffset) 1395 console.info("target offset: " + extraInfo.targetOffset) 1396 console.info("velocity: " + extraInfo.velocity) 1397 }) 1398 .onAnimationEnd((index: number, extraInfo: SwiperAnimationEvent) => { 1399 console.info("index: " + index) 1400 console.info("current offset: " + extraInfo.currentOffset) 1401 }) 1402 1403 Row({ space: 12 }) { 1404 Button('showNext') 1405 .onClick(() => { 1406 this.swiperController.showNext() 1407 }) 1408 Button('showPrevious') 1409 .onClick(() => { 1410 this.swiperController.showPrevious() 1411 }) 1412 }.margin(5) 1413 }.width('100%') 1414 .margin({ top: 5 }) 1415 } 1416} 1417``` 1418 1419 1420 1421### Example 2: Implementing a Digit-Style Navigation Point Indicator 1422 1423This example showcases how to implement a digit-style navigation point indicator using the **DigitIndicator** API. 1424 1425```ts 1426// xxx.ets 1427class MyDataSource implements IDataSource { 1428 private list: number[] = [] 1429 1430 constructor(list: number[]) { 1431 this.list = list 1432 } 1433 1434 totalCount(): number { 1435 return this.list.length 1436 } 1437 1438 getData(index: number): number { 1439 return this.list[index] 1440 } 1441 1442 registerDataChangeListener(listener: DataChangeListener): void { 1443 } 1444 1445 unregisterDataChangeListener() { 1446 } 1447} 1448 1449@Entry 1450@Component 1451struct SwiperExample { 1452 private swiperController: SwiperController = new SwiperController() 1453 private data: MyDataSource = new MyDataSource([]) 1454 1455 aboutToAppear(): void { 1456 let list: number[] = [] 1457 for (let i = 1; i <= 10; i++) { 1458 list.push(i); 1459 } 1460 this.data = new MyDataSource(list) 1461 } 1462 1463 build() { 1464 Column({ space: 5 }) { 1465 Swiper(this.swiperController) { 1466 LazyForEach(this.data, (item: string) => { 1467 Text(item.toString()) 1468 .width('90%') 1469 .height(160) 1470 .backgroundColor(0xAFEEEE) 1471 .textAlign(TextAlign.Center) 1472 .fontSize(30) 1473 }, (item: string) => item) 1474 } 1475 .cachedCount(2) 1476 .index(1) 1477 .autoPlay(true) 1478 .interval(4000) 1479 .indicator(Indicator.digit() // Set the digit-style navigation point indicator. 1480 .top(200) 1481 .fontColor(Color.Gray) 1482 .selectedFontColor(Color.Gray) 1483 .digitFont({ size: 20, weight: FontWeight.Bold }) 1484 .selectedDigitFont({ size: 20, weight: FontWeight.Normal })) 1485 .loop(true) 1486 .duration(1000) 1487 .itemSpace(0) 1488 .displayArrow(true, false) 1489 1490 Row({ space: 12 }) { 1491 Button('showNext') 1492 .onClick(() => { 1493 this.swiperController.showNext() 1494 }) 1495 Button('showPrevious') 1496 .onClick(() => { 1497 this.swiperController.showPrevious() 1498 }) 1499 }.margin(5) 1500 }.width('100%') 1501 .margin({ top: 5 }) 1502 } 1503} 1504``` 1505 1506 1507### Example 3: Configuring Group Page-Turning 1508 1509This example illustrates the group page-turning effect using the **displayCount** property. 1510 1511```ts 1512// xxx.ets 1513class MyDataSource implements IDataSource { 1514 private list: number[] = [] 1515 1516 constructor(list: number[]) { 1517 this.list = list 1518 } 1519 1520 totalCount(): number { 1521 return this.list.length 1522 } 1523 1524 getData(index: number): number { 1525 return this.list[index] 1526 } 1527 1528 registerDataChangeListener(listener: DataChangeListener): void { 1529 } 1530 1531 unregisterDataChangeListener() { 1532 } 1533} 1534 1535@Entry 1536@Component 1537struct SwiperExample { 1538 private swiperController: SwiperController = new SwiperController() 1539 private data: MyDataSource = new MyDataSource([]) 1540 1541 aboutToAppear(): void { 1542 let list: number[] = [] 1543 for (let i = 1; i <= 10; i++) { 1544 list.push(i); 1545 } 1546 this.data = new MyDataSource(list) 1547 } 1548 1549 build() { 1550 Column({ space: 5 }) { 1551 Swiper(this.swiperController) { 1552 LazyForEach(this.data, (item: string) => { 1553 Text(item.toString()) 1554 .width('90%') 1555 .height(160) 1556 .backgroundColor(0xAFEEEE) 1557 .textAlign(TextAlign.Center) 1558 .fontSize(30) 1559 }, (item: string) => item) 1560 } 1561 .displayCount(3, true) 1562 .autoPlay(true) 1563 .interval(4000) 1564 .loop(true) 1565 .duration(1000) 1566 .itemSpace(10) 1567 .indicator( // Set the style of the navigation point indicator. 1568 new DotIndicator() 1569 .itemWidth(15) 1570 .itemHeight(15) 1571 .selectedItemWidth(15) 1572 .selectedItemHeight(15) 1573 .color(Color.Gray) 1574 .selectedColor(Color.Blue)) 1575 1576 Row({ space: 12 }) { 1577 Button('showNext') 1578 .onClick(() => { 1579 this.swiperController.showNext() 1580 }) 1581 Button('showPrevious') 1582 .onClick(() => { 1583 this.swiperController.showPrevious() 1584 }) 1585 }.margin(5) 1586 }.width('100%') 1587 .margin({ top: 5 }) 1588 } 1589} 1590``` 1591 1592 1593### Example 4: Customizing the Page Switching Animation 1594 1595This example presents how to implement a custom page switching animation for the **Swiper** component through the **customContentTransition** API. 1596 1597```ts 1598// xxx.ets 1599@Entry 1600@Component 1601struct SwiperCustomAnimationExample { 1602 private DISPLAY_COUNT: number = 2 1603 private MIN_SCALE: number = 0.75 1604 1605 @State backgroundColors: Color[] = [Color.Green, Color.Blue, Color.Yellow, Color.Pink, Color.Gray, Color.Orange] 1606 @State opacityList: number[] = [] 1607 @State scaleList: number[] = [] 1608 @State translateList: number[] = [] 1609 @State zIndexList: number[] = [] 1610 1611 aboutToAppear(): void { 1612 for (let i = 0; i < this.backgroundColors.length; i++) { 1613 this.opacityList.push(1.0) 1614 this.scaleList.push(1.0) 1615 this.translateList.push(0.0) 1616 this.zIndexList.push(0) 1617 } 1618 } 1619 1620 build() { 1621 Column() { 1622 Swiper() { 1623 ForEach(this.backgroundColors, (backgroundColor: Color, index: number) => { 1624 Text(index.toString()).width('100%').height('100%').fontSize(50).textAlign(TextAlign.Center) 1625 .backgroundColor(backgroundColor) 1626 // Customize how the opacity, scale, translate, and other attributes change during the custom switching animation. 1627 .opacity(this.opacityList[index]) 1628 .scale({ x: this.scaleList[index], y: this.scaleList[index] }) 1629 .translate({ x: this.translateList[index] }) 1630 .zIndex(this.zIndexList[index]) 1631 }) 1632 } 1633 .height(300) 1634 .indicator(false) 1635 .displayCount(this.DISPLAY_COUNT, true) 1636 .customContentTransition({ 1637 // The page is removed from the render tree when 1000 ms (timeout time) has elapsed. 1638 timeout: 1000, 1639 // Called on a frame-by-frame basis for all pages in the viewport. You can change the values of attributes such as opacity, scale, translate, and zIndex in the callback to implement a custom animation. 1640 transition: (proxy: SwiperContentTransitionProxy) => { 1641 if (proxy.position <= proxy.index % this.DISPLAY_COUNT || proxy.position >= this.DISPLAY_COUNT + proxy.index % this.DISPLAY_COUNT) { 1642 // Reset the attribute values when a page in the same group is swiped left or is swiped right to be completely out of the viewport. 1643 this.opacityList[proxy.index] = 1.0 1644 this.scaleList[proxy.index] = 1.0 1645 this.translateList[proxy.index] = 0.0 1646 this.zIndexList[proxy.index] = 0 1647 } else { 1648 // When a page in the same group is swiped right but is still within the viewport, the attribute values of the left and right pages in the same group are changed frame by frame based on the position. The changes implement the custom switching animation in which the two pages move close to the middle of the <Swiper> and are transparently scaled in or out. 1649 if (proxy.index % this.DISPLAY_COUNT === 0) { 1650 this.opacityList[proxy.index] = 1 - proxy.position / this.DISPLAY_COUNT 1651 this.scaleList[proxy.index] = this.MIN_SCALE + (1 - this.MIN_SCALE) * (1 - proxy.position / this.DISPLAY_COUNT) 1652 this.translateList[proxy.index] = - proxy.position * proxy.mainAxisLength + (1 - this.scaleList[proxy.index]) * proxy.mainAxisLength / 2.0 1653 } else { 1654 this.opacityList[proxy.index] = 1 - (proxy.position - 1) / this.DISPLAY_COUNT 1655 this.scaleList[proxy.index] = this.MIN_SCALE + (1 - this.MIN_SCALE) * (1 - (proxy.position - 1) / this.DISPLAY_COUNT) 1656 this.translateList[proxy.index] = - (proxy.position - 1) * proxy.mainAxisLength - (1 - this.scaleList[proxy.index]) * proxy.mainAxisLength / 2.0 1657 } 1658 this.zIndexList[proxy.index] = -1 1659 } 1660 } 1661 }) 1662 .onContentDidScroll((selectedIndex: number, index: number, position: number, mainAxisLength: number) => { 1663 // Called when content in the <Swiper> component scrolls. In this callback, you can customize the navigation point indicator switching animation. 1664 console.info("onContentDidScroll selectedIndex: " + selectedIndex + ", index: " + index + ", position: " + position + ", mainAxisLength: " + mainAxisLength) 1665 }) 1666 }.width('100%') 1667 } 1668} 1669``` 1670 1671 1672### Example 5: Configuring Overflow for the Dot-Style Navigation Point Indicator 1673 1674This example illustrates the activation of the overflow effect when the number of navigation dots exceeds the limit set through the **maxDisplayCount** property of the **DotIndicator** API. 1675 1676```ts 1677class MyDataSource implements IDataSource { 1678 private list: number[] = [] 1679 1680 constructor(list: number[]) { 1681 this.list = list 1682 } 1683 1684 totalCount(): number { 1685 return this.list.length 1686 } 1687 1688 getData(index: number): number { 1689 return this.list[index] 1690 } 1691 1692 registerDataChangeListener(listener: DataChangeListener): void { 1693 } 1694 1695 unregisterDataChangeListener() { 1696 } 1697} 1698 1699@Entry 1700@Component 1701struct Index { 1702 private swiperController: SwiperController = new SwiperController() 1703 private data: MyDataSource = new MyDataSource([]) 1704 1705 aboutToAppear(): void { 1706 let list: number[] = [] 1707 for (let i = 1; i <= 15; i++) { 1708 list.push(i); 1709 } 1710 this.data = new MyDataSource(list) 1711 } 1712 1713 build() { 1714 Column({ space: 5 }) { 1715 Swiper(this.swiperController) { 1716 LazyForEach(this.data, (item: string) => { 1717 Text(item.toString()) 1718 .width('90%') 1719 .height(160) 1720 .backgroundColor(0xAFEEEE) 1721 .textAlign(TextAlign.Center) 1722 .fontSize(30) 1723 }, (item: string) => item) 1724 } 1725 .cachedCount(2) 1726 .index(5) 1727 .autoPlay(true) 1728 .interval(4000) 1729 .loop(true) 1730 .duration(1000) 1731 .itemSpace(0) 1732 .indicator( // Set the style of the navigation point indicator. 1733 new DotIndicator() 1734 .itemWidth(8) 1735 .itemHeight(8) 1736 .selectedItemWidth(16) 1737 .selectedItemHeight(8) 1738 .color(Color.Gray) 1739 .selectedColor(Color.Blue) 1740 .maxDisplayCount(9)) 1741 .displayArrow({ // Set the arrow style of the navigation point indicator. 1742 showBackground: true, 1743 isSidebarMiddle: true, 1744 backgroundSize: 24, 1745 backgroundColor: Color.White, 1746 arrowSize: 18, 1747 arrowColor: Color.Blue 1748 }, false) 1749 .curve(Curve.Linear) 1750 Row({ space: 12 }) { 1751 Button('showNext') 1752 .onClick(() => { 1753 this.swiperController.showNext() 1754 }) 1755 Button('showPrevious') 1756 .onClick(() => { 1757 this.swiperController.showPrevious() 1758 }) 1759 }.margin(5) 1760 }.width('100%') 1761 .margin({ top: 5 }) 1762 } 1763} 1764``` 1765 1766 1767
