1.1.0 • Published 4 years ago

mt-carousel v1.1.0

Weekly downloads
8
License
MIT
Repository
-
Last release
4 years ago

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

paramdetailtypedefault
childrencollection of child nodes,array[]
intervalcarousel timenumber3000
autoPlaywhether to loopbooltrue
indicatorSizeindicator style sizestring'middle'
indicatorColorindicator style colorstring'#f80'
1.1.0

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago