<slider>

0.4 cn

Summary

A slide's player to show slides (mostly as pictures) one page by another. The default interval between two slides is 3 seconds.

Child Components

It supports all kinds of weex components as its slides, especially the indicator component which can be used only as a child component of slider.

Attributes

auto-play: <boolean> true | false. This value determines whether the slides plays automatically after the page rendering finished. The default value is false.
index: <number> . This value determines the index of current shown slide. The default value is 0.

Other attributes please check out the common attributes.

Styles

common styles: check out common styles for components

support flexbox related styles
support box model related styles
support position related styles
support opacity, background-color etc.

Events

change: triggerd when the slide's index is changed. The event object contains the attribute of index, which is the index number of the currently shown slide.

common events: check out the common events

support click event. Check out common events
support appear / disappear event. Check out common events

Example

<template>
  <div>
    <slider auto-play="true" onchange="change" style="...">
      <image repeat="{{imageList}}" src="{{src}}" style="..."></image>
      <indicator></indicator>
    </slider>
  </div>
</template>

<script>
  module.exports = {
    data: {
      imageList: [{src: '...'}, {src: '...'}, ...]
    },
    methods: {
      change: function (e) {
        // e.index
      }
    }
  }
</script>

slider