1# swiper
2
3The **\<swiper>** component provides a container that allows users to switch among child components using swipe gestures.
4
5> **NOTE**
6>
7> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
8
9
10## Child Components
11
12All child components except **\<list>** are supported.
13
14
15## Attributes
16
17| Name| Type| Default Value| Mandatory| Description|
18| -------- | -------- | -------- | -------- | -------- |
19| index | number | 0 | No| Index of the child component currently displayed in the container.|
20| loop | boolean | true | No| Whether to enable looping. |
21| duration | number | - | No| Duration of the autoplay for child component switching.|
22| vertical | boolean | false | No| Whether the swipe gesture is performed vertically. A vertical swipe uses the vertical indicator.<br>The value cannot be dynamically updated.|
23| id | string | - | No| Unique ID of the component.|
24| style | string | - | No| Style declaration of the component.|
25| class | string | - | No| Style class of the component, which is used to refer to a style table.|
26| ref | string | - | No| Reference information of child elements, which is registered with the parent component on **$refs**.|
27
28
29## Events
30
31| Name| Parameter| Description|
32| -------- | -------- | -------- |
33| change | { index: currentIndex } | Triggered when the index of the currently displayed component changes.|
34| click | - | Triggered when the component is clicked.|
35| longpress | - | Triggered when the component is long pressed.|
36| swipe<sup>5+</sup> | [SwipeEvent](js-lite-common-events.md) | Triggered when a user quickly swipes on the component.|
37
38
39## Styles
40
41| Name| Type| Default Value| Mandatory| Description|
42| -------- | -------- | -------- | -------- | -------- |
43| width | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component width.<br>If this attribute is not set, the default value **0** is used. |
44| height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component height.<br>If this attribute is not set, the default value **0** is used. |
45| padding | &lt;length&gt; | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
46| padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No| Left, top, right, and bottom padding.|
47| margin | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
48| margin-[left\|top\|right\|bottom] | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.|
49| border-width | &lt;length&gt; | 0 | No| Shorthand attribute to set the margin for all sides.|
50| border-color | &lt;color&gt; | black | No| Shorthand attribute to set the color for all borders.|
51| border-radius | &lt;length&gt; | - | No| Radius of round-corner borders.|
52| background-color | &lt;color&gt; | - | No| Background color.|
53| opacity<sup>5+</sup> | number | 1 | No| Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent.|
54| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
55| [left\|top] | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | - | No| Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element. |
56
57
58## Example
59
60
61```html
62<!-- xxx.hml -->
63<swiper class="container" index="{{index}}">
64  <div class="swiper-item primary-item">
65    <text>1</text>
66  </div>
67  <div class="swiper-item warning-item">
68    <text>2</text>
69  </div>
70  <div class="swiper-item success-item">
71    <text>3</text>
72  </div>
73</swiper>
74```
75
76
77```css
78/* xxx.css */
79.container {
80  left: 0px;
81  top: 0px;
82  width: 454px;
83  height: 454px;
84}
85.swiper-item {
86  width: 454px;
87  height: 454px;
88  justify-content: center;
89  align-items: center;
90}
91.primary-item {
92  background-color: #007dff;
93}
94.warning-item {
95  background-color: #ff7500;
96}
97.success-item {
98  background-color: #41ba41;
99}
100```
101
102
103```js
104/* xxx.js */
105export default {
106  data: {
107    index: 1
108  }
109}
110```
111
112![swiper](figures/swiper-lite.gif)
113