<slider>

Summary

A slide's player to show slides (mostly 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. The indicator component should be only used as a child component of slider. An indicator cannot have any sub component.

Attributes

• auto-play, boolean. This value determines whether the slides plays automatically after the page rendering finished. The default value is false.
• interval, number in 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.
• offset-x-accuracy, number. Set the scroll event trigger precision, precision value represents the rolling distance of a page width ratio.
• show-indicators, boolean. Set whether to display indicator. This attribute is useless if there is no <indicator> in the slider despite the default value of show-indicators is true.
• infinite, boolean. Set whether the page in the slider can be scrolled. The default value is true.
• scrollable, boolean. Set whether slider pages can be switched by sliding gestures. The default value is true.
• keep-index, boolean, . Set whether to maintain the index of the page after the data changes.
• forbid-slide-animation, boolean, . On iOS animation is enabled by default, and here we provide this attribute to shutdown animation on iOS.

Styles

• common styles. Check out common styles for components.

Events

• common events. Check out the common 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.
• scroll. This event is fired when scrolling. The current offsetXRatio value is given in this event callback. And offsetXRatio means the current slide offset ratio which value range is [-1, 1]. Negative value means the slide is shifted to left and positive value means to right. For example, -0.2 means 20% of the current slide is slided beyonds left border of the slider.

Vue Example

<template>
  <div>
    <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>
      </div>
    </slider>
  </div>
</template>

<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;
  }
</style>

<script>
  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'}
        ]
      }
    }
  }
</script>

• Demo
• Demo of setting scroll event
• Demo of auto-play with indicator
• Demo Ocean

Rax Example

rax-slider is the component <slider> of rax, which can run in web and weex.

import { createElement, Component, render, createRef } from 'rax';
import View from 'rax-view';
import Image from 'rax-image';
import Slider from 'rax-slider';
import Driver from 'driver-universal';

const App  = () => {
  const handleChange = (idx) {
    console.log('change to ', idx);
  }

  return (
    <View>
      <Slider
        className="slider"
        width="750"
        height="500"
    autoPlay
        onChange={handleChange}
      >
        <View style={styles.itemWrap}>
          <Image style={styles.image} source={{height: 500, width: 375, uri: '//gw.alicdn.com/tfs/TB19NbqKFXXXXXLXVXXXXXXXXXX-750-500.png'}} />
        </View>
        <View style={styles.itemWrap}>
          <Image style={styles.image} source={{height: 500, width: 375, uri: '//gw.alicdn.com/tfs/TB1tWYBKFXXXXatXpXXXXXXXXXX-750-500.png'}} />
        </View>
        <View style={styles.itemWrap}>
          <Image style={styles.image} source={{height: 500, width: 375, uri: '//gw.alicdn.com/tfs/TB1SX_vKFXXXXbyXFXXXXXXXXXX-750-500.png'}} />
        </View>
      </Slider>
    </View>
  );
}

render(<App />, document.body, { driver: Driver });

rax-slider doc