Carousel 走马灯

基本用法

import { Carousel } from 'zarm';
const ITEMS = [
  'https://static.zhongan.com/website/health/zarm/images/banners/1.png',
  'https://static.zhongan.com/website/health/zarm/images/banners/2.png',
  'https://static.zhongan.com/website/health/zarm/images/banners/3.png',
];
const contentRender = () => {
  return ITEMS.map((item, i) => {
    return (
      <div className="carousel__item__pic" key={+i}>
        <img src={item} alt="" draggable={false} />
      </div>
    );
  });
}
ReactDOM.render(
  <Carousel
    onChange={(index) => {
      console.log(`onChange: ${index}`);
    }}
  >
    {contentRender()}
  </Carousel>
, mountNode);

纵向

import { Carousel } from 'zarm';
const ITEMS = [
  'https://static.zhongan.com/website/health/zarm/images/banners/1.png',
  'https://static.zhongan.com/website/health/zarm/images/banners/2.png',
  'https://static.zhongan.com/website/health/zarm/images/banners/3.png',
];
const contentRender = () => {
  return ITEMS.map((item, i) => {
    return (
      <div className="carousel__item__pic" key={+i}>
        <img src={item} alt="" draggable={false} />
      </div>
    );
  });
}
ReactDOM.render(
  <Carousel direction="up" height="48vw">{contentRender()}</Carousel>
, mountNode);

循环轮播

import { Carousel, Button } from 'zarm';
const ITEMS = [
  'https://static.zhongan.com/website/health/zarm/images/banners/1.png',
  'https://static.zhongan.com/website/health/zarm/images/banners/2.png',
  'https://static.zhongan.com/website/health/zarm/images/banners/3.png',
];
const contentRender = () => {
  return ITEMS.map((item, i) => {
    return (
      <div className="carousel__item__pic" key={+i}>
        <img src={item} alt="" draggable={false} />
      </div>
    );
  });
}
class Demo extends React.Component {
  render() {
    return (
      <div>
        <Carousel
          ref={(ele) => { this.carousel = ele; }}
          loop
          direction="left"
          onChange={(index) => {
            console.log(`onChange: ${index}`);
          }}
        >
          {contentRender()}
        </Carousel>
        <div className="controls">
          <Button
            block
            size="sm"
            onClick={() => {
              this.carousel.onJumpTo(0);
            }}
          >
            无动画切换指定页
          </Button>
          <Button
            block
            size="sm"
            onClick={() => {
              this.carousel.onSlideTo(2);
            }}
          >
            滑动到指定页
          </Button>
        </div>
      </div>
    )
  }
}
ReactDOM.render(<Demo />, mountNode);

自动循环轮播

import { Carousel } from 'zarm';
const ITEMS = [
  'https://static.zhongan.com/website/health/zarm/images/banners/1.png',
  'https://static.zhongan.com/website/health/zarm/images/banners/2.png',
  'https://static.zhongan.com/website/health/zarm/images/banners/3.png',
];
const contentRender = () => {
  return ITEMS.map((item, i) => {
    return (
      <div className="carousel__item__pic" key={+i}>
        <img src={item} alt="" draggable={false} />
      </div>
    );
  });
}
ReactDOM.render(
  <Carousel
    autoPlay
    loop
    direction="left"
    onChangeEnd={(index) => {
      console.log(`onChangeEnd: ${index}`);
    }}
  >
    {contentRender()}
  </Carousel>
, mountNode);

API