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.


  • auto-play: <boolean> true | false. This value determines whether the slides plays automatically after the page rendering finished. The default value is false.
  • interval: <number> millisecond. This value determines time interval for each page displayed in slider.
  • index: <number> . This value determines the index of current shown slide. The default value is 0.


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.


  • 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


<slider class="slider" interval="3000" auto-play="true">
<div class="frame" v-for="img in imageList">
<image class="image" resize="cover" :src="img.src"></image>
<style scoped>
.image {
width: 700px;
height: 700px;
.slider {
margin-top: 25px;
margin-left: 25px;
width: 700px;
height: 700px;
border-width: 2px;
border-style: solid;
border-color: #41B883;
.frame {
width: 700px;
height: 700px;
position: relative;
export default {
data () {
return {
imageList: [
{ src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
{ src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'},
{ src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'}

try it