mt-carousel

mt-react-carousel

A light-weight React react-carousel-comp component with extremely easy API（只适用于移动端项目）. Online Demo, welcome code review

Installation

npm install react-carousel-comp --save

Usage

import img1 from './static/images/11.jpg';
import img2 from './static/images/12.jpg';
import img3 from './static/images/13.jpg';
import img4 from './static/images/14.jpg';
import img5 from './static/images/15.jpg';
import Carousel from './Carousel';

// 屏幕宽度
const screenWidth = window.screen.width ||
  document.documentElement.clientWidth ||
  document.body.clientWidth;

const source = [img1, img2, img3, img4, img5];
export default class App extends PureComponent {
  render() {
    return (
      <div className="container">
        <Carousel
          interval={5000}
          autoPlay={false}
          indicatorSize="middle"
          indicatorColor="#f80"
        >
          {
            source.map((item, key) =>
              <a
                href="javascript:;"
                className="carousel-item-a"
                key={key}
              >
                <img
                  src={item}
                  alt="轮播图"
                  className="carousel-item-a-img"
                />
              </a>
            )
          }
        </Carousel>
      </div>
    );
  }
}

props

param	detail	type	default
children	collection of child nodes,	array	[]
interval	carousel time	number	3000
autoPlay	whether to loop	bool	true
indicatorSize	indicator style size	string	'middle'
indicatorColor	indicator style color	string	'#f80'