• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# swiper
2
3
4The **\<Swiper>** component provides a container that allows users to switch among child components using swipe gestures.
5
6
7> **NOTE**
8>
9> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
10
11
12
13## Attributes
14
15In addition to the [universal attributes](js-service-widget-common-attributes.md), the following attributes are supported.
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| indicator | boolean | true  | No   | Whether to enable the indicator. The default value is **true**.                      |
21| digital   | 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**.|
22| loop      | boolean | true  | No   | Whether to enable looping.                               |
23| duration  | number  | -     | No   | Duration of the autoplay for child component switching.                             |
24| vertical  | boolean | false | No   | Whether the swipe gesture is performed vertically. A vertical swipe uses the vertical indicator.                  |
25
26
27## Styles
28
29In addition to the [universal styles](js-service-widget-common-styles.md), the following styles are supported.
30
31| Name                                | Type                                      | Default Value | Mandatory  | Description                  |
32| ---------------------------------- | ---------------------------------------- | ---- | ---- | -------------------- |
33| indicator-color                    | &lt;color&gt;                            | -    | No   | Fill color of the indicator.        |
34| indicator-selected-color           | &lt;color&gt;                            | -    | No   | Color of the currently selected indicator.        |
35| indicator-size                     | &lt;length&gt;                           | 4px  | No   | Diameter of the indicator.        |
36| indicator-top\|left\|right\|bottom | &lt;length&gt; \| &lt;percentage&gt; | -    | No   | Relative position of the indicator in the swiper.|
37
38
39## Events
40
41The [universal events](js-service-widget-common-events.md) are supported.
42
43
44## Example
45
46
47```html
48<!-- xxx.hml -->
49<swiper class="container" index="{{index}}">
50  <div class="swiper-item primary-item">
51    <text>1</text>
52  </div>
53  <div class="swiper-item warning-item">
54    <text>2</text>
55  </div>
56  <div class="swiper-item success-item">
57    <text>3</text>
58  </div>
59</swiper>
60```
61
62
63```css
64/* xxx.css */
65.container {
66  left: 0px;
67  top: 0px;
68  width: 454px;
69  height: 454px;
70}
71.swiper-item {
72  width: 454px;
73  height: 454px;
74  justify-content: center;
75  align-items: center;
76}
77.primary-item {
78  background-color: #007dff;
79}
80.warning-item {
81  background-color: #ff7500;
82}
83.success-item {
84  background-color: #41ba41;
85}
86```
87
88
89```json
90{
91  "data": {
92    "index": 1
93  }
94}
95```
96**4 x 4 widget**
97
98![Swiper](figures/swiper.png)
99