1# swiper 2 3> **NOTE** 4> 5> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. 6 7The **\<swiper>** component provides a container that allows users to switch among child components using swipe gestures. 8 9## Required Permissions 10 11None 12 13 14## Child Components 15 16Supported 17 18 19## Attributes 20 21In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported. 22 23| Name | Type | Default Value | Mandatory | Description | 24| ------------------------------ | ------- | ------ | ---- | ---------------------------------------- | 25| index | number | 0 | No | Index of the child component currently displayed in the container. | 26| autoplay | boolean | false | No | Whether to enable autoplay for child component switching. If this attribute is **true**, the indicator does not take effect<sup>5+</sup>. | 27| interval | number | 3000 | No | Autoplay interval, in milliseconds, when autoplay is enabled. | 28| indicator | boolean | true | No | Whether to enable the indicator. The default value is **true**. | 29| digital<sup>5+</sup> | boolean | false | No | Whether to enable the digital indicator. The default value is **false**.<br>The digital indicator takes effect only when **indicator** is set to **true**.| 30| indicatordisabled<sup>5+</sup> | boolean | false | No | Whether gesture operations are disabled on the indicator. If this attribute is set to **true**, the indicator does not respond to clicking or dragging operations. | 31| loop | boolean | true | No | Whether to enable looping. | 32| duration | number | - | No | Duration of the autoplay for child component switching. | 33| vertical | boolean | false | No | Whether the swipe gesture is performed vertically. A vertical swipe uses the vertical indicator. | 34| cachedsize<sup>7+</sup> | number | -1 | No | Minimum number of cached items during delayed loading of the **\<swiper>** component. The value **-1** indicates that all content is cached. | 35| scrolleffect<sup>7+</sup> | string | spring | No | Scroll effect. The options are as follows:<br>- **spring**: Similar to the physical dynamic effect of a spring. When the scrollbar reaches the edge, it can continue to scroll for a distance based on the initial speed or a touch event. It rebounds after being released.<br>- **fade**: Similar to the physical dynamic effect of fade. When the scrollbar reaches the edge, a wave shape fades. The fade changes according to the speed and scrolling distance.<br>- **none**: No effect when the scrollbar reaches the edge.<br>This attribute is valid only when **loop** is set to **false**.| 36 37 38## Styles 39 40In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported. 41 42| Name | Type | Default Value | Mandatory | Description | 43| ---------------------------------- | ---------------------------------------- | ---------- | ---- | -------------------- | 44| indicator-color | <color> | - | No | Fill color of the indicator. | 45| indicator-selected-color | <color> | \#ff007dff | No | Color of the currently selected indicator. | 46| indicator-size | <length> | 4px | No | Diameter of the indicator. | 47| indicator-top\|left\|right\|bottom | <length> \| <percentage> | - | No | Relative position of the indicator in the swiper.| 48| next-margin<sup>7+</sup> | <length> \| <percentage> | - | No | Next margin, used to reveal a small part of the next item. | 49| previous-margin<sup>7+</sup> | <length> \| <percentage> | - | No | Previous margin, used to reveal a small part of the previous item. | 50 51 52## Events 53 54In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported. 55 56| Name | Parameter | Description | 57| ---------------------------- | --------------------------------------- | ------------------ | 58| change | { index: currentIndex } | Triggered when the index of the currently displayed component changes.| 59| rotation | { value: rotationValue } | Triggered when the crown of the wearable rotates. | 60| animationfinish<sup>7+</sup> | - | Triggered when the animation is finished. | 61 62## Methods 63 64In addition to the [universal methods](../arkui-js/js-components-common-methods.md), the following methods are supported. 65 66| Name | Parameter | Description | 67| ------------ | -------------------------------------- | --------------- | 68| swipeTo | { index: number(specificLocation) } | Scrolls the child component to the position at the specified index.| 69| showNext | - | Shows the next child component. | 70| showPrevious | - | Shows the previous child component. | 71 72 73## Example 74 75```html 76<!-- xxx.hml --> 77<div class="container"> 78 <swiper class="swiper" id="swiper" index="0" indicator="true" loop="true" digital="false" cachedsize="-1" 79 scrolleffect="spring"> 80 <div class = "swiperContent1" > 81 <text class = "text">First screen</text> 82 </div> 83 <div class = "swiperContent2"> 84 <text class = "text">Second screen</text> 85 </div> 86 <div class = "swiperContent3"> 87 <text class = "text">Third screen</text> 88 </div> 89 </swiper> 90 <input class="button" type="button" value="swipeTo" onclick="swipeTo"></input> 91 <input class="button" type="button" value="showNext" onclick="showNext"></input> 92 <input class="button" type="button" value="showPrevious" onclick="showPrevious"></input> 93</div> 94``` 95 96```css 97/* xxx.css */ 98.container { 99 flex-direction: column; 100 width: 100%; 101 height: 100%; 102 align-items: center; 103} 104.swiper { 105 flex-direction: column; 106 align-content: center; 107 align-items: center; 108 width: 70%; 109 height: 130px; 110 border: 1px solid #000000; 111 indicator-color: #cf2411; 112 indicator-size: 14px; 113 indicator-bottom: 20px; 114 indicator-right: 30px; 115 margin-top: 100px; 116 next-margin:20px; 117 previous-margin:20px; 118} 119.swiperContent1{ 120 height: 100%; 121 width: 100%; 122 justify-content: center; 123 background-color: #007dff; 124} 125.swiperContent2{ 126 height: 100%; 127 width: 100%; 128 justify-content: center; 129 background-color: #ff7500; 130} 131.swiperContent3{ 132 height: 100%; 133 width: 100%; 134 justify-content: center; 135 background-color: #41ba41; 136} 137.button { 138 width: 70%; 139 margin: 10px; 140} 141.text { 142 font-size: 40px; 143} 144``` 145 146```js 147// xxx.js 148export default { 149 swipeTo() { 150 this.$element('swiper').swipeTo({index: 2}); 151 }, 152 showNext() { 153 this.$element('swiper').showNext(); 154 }, 155 showPrevious() { 156 this.$element('swiper').showPrevious(); 157 } 158} 159``` 160 161 162 163 164
