# Slider Demo

- order: 0
- hide :true

基本使用

---

````js
'use strict';
/** @jsx createElement */
import {createElement, Component,render} from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Image from 'nuke-image';
import Slider from 'nuke-slider';
import Page from 'nuke-page';
import Button from 'nuke-button';

const pics = [
'https://img.alicdn.com/tfs/TB1WOqpSVXXXXbiXFXXXXXXXXXX-820-545.jpg',
'https://img.alicdn.com/tfs/TB1bjeTSVXXXXacXXXXXXXXXXXX-820-547.jpg',
'https://img.alicdn.com/tfs/TB10QaMSVXXXXcWXXXXXXXXXXXX-820-546.jpg',
'https://img.alicdn.com/tfs/TB12UujSVXXXXbAXVXXXXXXXXXX-820-546.jpg'
];
const picsAppendList = [
'https://img.alicdn.com/tfs/TB19_0gaKuSBuNjy1XcXXcYjFXa-730-450.png',
'https://img.alicdn.com/tfs/TB1eBJ5wDtYBeNjy1XdXXXXyVXa-800-335.png'
]
let App = class NukeDemoIndex extends Component {
    constructor() {
        super();
        this.state = {
            index: 0,
            data: pics
        }
    }

    sliderChange = (e) => {
        this.setState({
            index : e.index
        });
        // alert('sliderChange' + e.index);
    }
    btnClick(n){
        this.refs.Slider.slideTo(n);
    }
    componentDidMount(){
      setTimeout(()=>{
        this.setState({
          data:this.state.data.concat(picsAppendList)
        });
      },2000);
    }
    renderPics(){
        let body =[];
        this.state.data.map((item,index)=>{
            body.push(<View style={[styles.item]}><Image src={item} style={styles.img}></Image></View>)
        })
        return body;
    }
    render() {
        return (
            <Page title="slider">
                <Page.Intro main="3s 自动轮播"></Page.Intro>
                    <View style={styles.sliderWrap}>
                        <Slider ref="Slider" style={styles.slider} width={700} height={465} autoplay={false} showsPagination={true} loop={true} index={this.state.index} autoplayTimeout="3000" paginationStyle={styles.paginationStyle} onChange={this.sliderChange}>
                            {this.renderPics()}
                        </Slider>
                    </View>
                <View style={styles.btns}>
                    <Button style={styles.btn} block type="primary" onPress={()=>this.btnClick(0)}>0</Button>
                    <Button style={styles.btn} block type="primary" onPress={()=>this.btnClick(1)}>1</Button>


                </View>
            </Page>     
        );
    }
}
const styles={
    sliderWrap:{
        padding:25,
    },
    slider:{

        overflow:'hidden'
    },
    item:{
        width: 700,
        height: 465,
    },

    paginationStyle:{
        position: 'absolute',
        width: 700,
        height: 100,
        left: 0,
        bottom:0,
        color: 'rgba(255, 255, 255 ,0.5)',
        itemColor: '#ffffff',
        itemSelectedColor: 'blue'
    },
    btns:{
        margin:'30rem',
    },
    btn:{
        marginBottom:'30rem'
    },
    img:{
        width:700,
        height:465
    }
}
render(<App/>);


````