Swiper - Mobile Platform as a Service - Alibaba Cloud Documentation Center

Slider view container.

Attribute	Type	Default value	Description	Minimum version
indicator-dots	Boolean	false	Whether to display the indicator.	-
indicator-color	Color	rgba(0, 0, 0, .3)	Color of the indicator.	-
indicator-active-color	Color	#000	Color of the indicator selected.	-
active-class	String	-	`class` when `swiper-item` is visible.	1.13.7
changing-class	String	-	`class` when multiple screens are visible if `acceleration` is set to `{{true}}` during sliding.	1.13.7
autoplay	Boolean	false	Whether to enable automatic switchover.	-
current	Number	0	Index of the current page.	-
duration	Number	500 (ms)	Sliding animation duration.	-
interval	Number	5000 (ms)	Interval of automatic switchover.	-
circular	Boolean	false	Whether to enable unlimited sliding.	-
vertical	Boolean	false	Whether the sliding direction is vertical.	-
previous-margin	String	‘0px’	Front margin, in px. Version 1.9.0 supports the horizontal direction only.	1.9.0
next-margin	String	‘0px’	Rear margin, in px. Version 1.9.0 supports the horizontal direction only.	1.9.0
acceleration	Boolean	false	If this function is enabled, multiple screens can be slid continuously based on the sliding speed.	1.13.7
disable-programmatic-animation	Boolean	false	Whether to disable animations when a code change triggers the swiper switchover.	1.13.7
onChange	EventHandle	-	Triggered by a current change. `event.detail = {current, isChanging}`. `isChanging` has a value when `acceleration` is set to `{{true}}`. During multiple screen sliding, when several screens trigger the `onChange` event and `isChanging` is `true`, the last screen returns `false`.	-
onTransition	EventHandle	-	The transition event is triggered when the position of swiper-item in swiper changes.	1.15.0
onAnimationEnd	EventHandle	-	The animationEnd event is triggered after the animation ends. `event.detail = {current, source}`. The value of “source” can be `autoplay` or `touch`.	1.15.0
disable-touch	Boolean	false	Whether to disable the touch operation of the user.	1.15.0

swiper-item

swiper-item can be placed only in the swiper component. The width and height are automatically set to 100%.

Illustration

screenshoot

Code sample

<swiper
  indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}"
  interval="{{interval}}"
>
  <block a:for="{{background}}">
    <swiper-item>
      <view class="swiper-item bc_{{item}}"></view>
    </swiper-item>
  </block>
</swiper>
<view class="btn-area">
  <button class="btn-area-button" type="default" onTap="changeIndicatorDots">indicator-dots</button>
  <button class="btn-area-button" type="default" onTap="changeAutoplay">autoplay</button>
</view>
<slider onChange="intervalChange" value="{{interval}}" show-value min="2000" max="10000"/>
<view class="section__title">interval</view>

Page({
  data: {
    background: ['green', 'red', 'yellow'],
    indicatorDots: true,
    autoplay: false,
    interval: 3000,
  },
  changeIndicatorDots(e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  changeAutoplay(e) {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },
  intervalChange(e) {
    this.setData({
      interval: e.detail.value
    })
  },
})