swiper

The <Swiper> component provides a container that allows users to switch among child components using swipe gestures.

NOTE

The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.

Attributes

In addition to the universal attributes, the following attributes are supported.

Name	Type	Default Value	Mandatory	Description
index	number	0	No	Index of the child component currently displayed in the container.
indicator	boolean	true	No	Whether to enable the indicator. The default value is true.
digital	boolean	false	No	Whether to enable the digital indicator. The default value is false. The digital indicator takes effect only when indicator is set to true.
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.

Styles

In addition to the universal styles, the following styles are supported.

Name	Type	Default Value	Mandatory	Description
indicator-color	<color>	-	No	Fill color of the indicator.
indicator-selected-color	<color>	-	No	Color of the currently selected indicator.
indicator-size	<length>	4px	No	Diameter of the indicator.
indicator-top\|left\|right\|bottom	<length> \|<percentage>	-	No	Relative position of the indicator in the swiper.

Events

The universal events are supported.

Example

<!-- xxx.hml -->
<swiper class="container" index="{{index}}">
  <div class="swiper-item primary-item">
    <text>1</text>
  </div>
  <div class="swiper-item warning-item">
    <text>2</text>
  </div>
  <div class="swiper-item success-item">
    <text>3</text>
  </div>
</swiper>

/* xxx.css */
.container {
  left: 0px;
  top: 0px;
  width: 454px;
  height: 454px;
}
.swiper-item {
  width: 454px;
  height: 454px;
  justify-content: center;
  align-items: center;
}
.primary-item {
  background-color: #007dff;
}
.warning-item {
  background-color: #ff7500;
}
.success-item {
  background-color: #41ba41;
}