Swiper

Slider view container with indicator dots, autoplay, and loop support.

Attributes

Attribute	Type	Default value	Description	Minimum version
indicator-dots	Boolean	false	Shows indicator dots.	-
indicator-color	Color	rgba(0, 0, 0, .3)	Color of inactive indicator dots.	-
indicator-active-color	Color	#000	Color of the active indicator dot.	-
active-class	String	-	CSS `class` for the visible `swiper-item`.	1.13.7
changing-class	String	-	CSS `class` for intermediate screens during scrolling. Requires `acceleration` = `{{true}}`.	1.13.7
autoplay	Boolean	false	Enables automatic slide switching.	-
current	Number	0	Index of the current slide.	-
duration	Number	500 (ms)	Slide animation duration in milliseconds.	-
interval	Number	5000 (ms)	Autoplay interval in milliseconds.	-
circular	Boolean	false	Enables infinite loop sliding.	-
vertical	Boolean	false	Enables vertical sliding.	-
previous-margin	String	‘0px’	Leading margin in px. Horizontal only as of 1.9.0.	1.9.0
next-margin	String	‘0px’	Trailing margin in px. Horizontal only as of 1.9.0.	1.9.0
acceleration	Boolean	false	Enables velocity-based multi-screen sliding.	1.13.7
disable-programmatic-animation	Boolean	false	Disables animation for programmatic slide changes.	1.13.7
onChange	EventHandle	-	Fires when `current` changes. `event.detail = {current, isChanging}`. `isChanging` exists only when `acceleration` is `{{true}}`: `true` for intermediate screens, `false` for the final screen.	-
onTransition	EventHandle	-	Fires when a `swiper-item` position changes.	1.15.0
onAnimationEnd	EventHandle	-	Fires when slide animation ends. `event.detail = {current, source}`. `source`: `autoplay` or `touch`.	1.15.0
disable-touch	Boolean	false	Disables touch-based sliding.	1.15.0

swiper-item

Must be nested in a swiper component. Width and height auto-set to 100%.

Legend

image center

Code example

<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
    })
  },
})