Slider

轮播组件。

组件

Slider

<Slider> 组件，轮播容器。

Props

controls

PropType: bool

是否显示「上、下翻页」按钮，默认为 true。

pager

PropType: bool

是否显示「分页圆点」按钮，默认为 true。

interval

PropType: number

轮播间隔时间，默认为 5000（ms）。

autoPlay

PropType: bool

是否自动播放，默认为 true。

loop

PropType: bool

是否循环播放，默认为 true。

defaultActiveIndex

PropType: number

默认激活的幻灯片编号。

onAction

PropType: func

幻灯片切换后的回调函数，接受两个参数 (index, direction)，index 为幻灯片编号，direction 为滚动方向。

Slider.Item

<Slider.Item> 组件，轮播子项。

Props

caption

PropType: node

幻灯片标题。

thumbnail

PropType: string

幻灯片缩略图 URL，设置 thumbnail 以后，分页圆点将替换为缩略图。

示例

import React from 'react';
import {
  Container,
  Group,
  Button,
  Slider,
} from 'amazeui-touch';
const onAction = function(index, direction) {
  console.log('激活的幻灯片编号：', index, '，滚动方向：', direction);
};
const sliderIntance = (
  <Slider
    onAction={onAction}
  >
    <Slider.Item>
      <img
        src="http://s.amazeui.org/media/i/demos/bing-1.jpg" />
    </Slider.Item>
    <Slider.Item><img
      src="http://s.amazeui.org/media/i/demos/bing-2.jpg" /></Slider.Item>
    <Slider.Item>
      <img
        src="http://s.amazeui.org/media/i/demos/bing-3.jpg" /></Slider.Item>
    <Slider.Item>
      <img
        src="http://s.amazeui.org/media/i/demos/bing-4.jpg" /></Slider.Item>
  </Slider>
);
const data = [
  {
    thumb: 'http://s.amazeui.org/media/i/demos/bing-1.jpg',
    img: 'http://s.amazeui.org/media/i/demos/bing-1.jpg'
  },
  {
    thumb: 'http://s.amazeui.org/media/i/demos/bing-2.jpg',
    img: 'http://s.amazeui.org/media/i/demos/bing-2.jpg'
  },
  {
    thumb: 'http://s.amazeui.org/media/i/demos/bing-3.jpg',
    img: 'http://s.amazeui.org/media/i/demos/bing-3.jpg'
  },
  {
    thumb: 'http://s.amazeui.org/media/i/demos/bing-4.jpg',
    img: 'http://s.amazeui.org/media/i/demos/bing-4.jpg'
  }];
const data2 = [
  {
    img: 'http://s.amazeui.org/media/i/demos/bing-1.jpg',
    desc: '这是标题标题标题标题标题标题标题0'
  },
  {
    img: 'http://s.amazeui.org/media/i/demos/bing-2.jpg',
    desc: '这是标题标题标题标题标题标题标题1'
  },
  {
    img: 'http://s.amazeui.org/media/i/demos/bing-3.jpg',
    desc: '这是标题标题标题标题标题标题标题2'
  },
  {
    img: 'http://s.amazeui.org/media/i/demos/bing-4.jpg',
    desc: '这是标题标题标题标题标题标题标题3'
  }
];
const sliderCaption = (
  <Slider>
    {data2.map(function(item, i) {
      return (
        <Slider.Item
          key={i}
        >
          <img src={item.img} />
          <div className="slider-caption">
            {item.desc}
          </div>
        </Slider.Item>
      );
    })}
  </Slider>
);
const sliderThumbs = (
  <Slider
    controls={false}
  >
    {data.map(function(item, i) {
      return (
        <Slider.Item
          key={i}
          thumbnail={item.thumb}
        >
          <img src={item.img} />
        </Slider.Item>
      );
    })}
  </Slider>
);
const SliderExample = React.createClass({
  render() {
    return (
      <Container {...this.props}>
        <Group
          header="默认"
          noPadded
        >
          {sliderIntance}
        </Group>
        <Group
          header="缩略图"
          noPadded
        >
          {sliderThumbs}
        </Group>
        <Group
          header="标题"
          noPadded
        >
          {sliderCaption}
        </Group>
      </Container>
    );
  }
});
export default SliderExample;

DemoCopy

原文: http://t.amazeui.org/#/docs/slider