# swiper
The **** component provides a container that allows users to switch among child components by swiping operations.
## Required Permissions
None
## Child Components
All child components except **** are supported.
## Attributes
In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.
Name
Type
Default Value
Mandatory
Description
index
number
0
No
Index of a child component currently displayed in the container.
autoplay
boolean
false
No
Whether to enable autoplay for child component switching. If this attribute is true, the indicator does not take effect5+.
interval
number
3000
No
Autoplay interval, in milliseconds, when autoplay is enabled.
indicator
boolean
true
No
Whether to enable the indicator. The default value is true.
digital5+
boolean
false
No
Whether to enable the digital indicator. The default value is false.
NOTE:
The digital indicator takes effect only when indicator is set to true.
indicatordisabled5+
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.
loop
boolean
true
No
Whether to enable looping.
duration
number
-
No
Duration of the autoplay for child component switching.
vertical
boolean
false
No
Whether the swipe gesture is performed vertically. A vertical swipe uses the vertical indicator.
cachedsize7+
number
-1
No
Minimum number of cached items during delayed loading of the <swiper> component. The value -1 indicates that all content is cached.
scrolleffect7+
string
spring
No
Scroll effect. The options are as follows:
spring: Similar to the physical dynamic effect of a spring. After scrolling to the edge, you can continue to scroll for a distance based on the initial speed or by touching the knob of the scrollbar. After you release your hand, the knob is rebounded.
fade: Similar to the physical dynamic effect of fade. When you scroll to the edge, a wave shape fades. The fade changes according to the speed and scrolling distance.
none: No effect after the scroll bar is moved to the edge.
NOTE:
This attribute is valid only when loop is set to false.
## Styles
In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported.
Name
Type
Default Value
Mandatory
Description
indicator-color
<color>
-
No
Fill color of the navigation point indicator.
indicator-selected-color
<color>
#ff007dff
No
Color of the currently selected navigation point indicator.
indicator-size
<length>
4px
No
Diameter of the navigation point indicator.
indicator-top|left|right|bottom
<length> | <percentage>
-
No
Relative position of the indicator in the swiper.
next-margin7+
<length> | <percentage>
-
No
Next margin, used to reveal a small part of the next item.
previous-margin7+
<length> | <percentage>
-
No
Previous margin, used to reveal a small part of the previous item.
## Events
In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported.
Name
Parameter
Description
change
{ index: currentIndex }
Triggered when the index of the currently displayed component changes.
rotation
{ value: rotationValue }
Triggered when the crown of the wearable rotates.
animationfinish7+
-
Triggered when the animation is finished.
## Methods
In addition to the methods in [Universal Methods](js-components-common-methods.md), the following events are supported.
Name
Parameter
Description
swipeTo
{ index: number(specified position) }
Scrolls the child component to the position at the specified index.