✨ 年轻人的第一个轮播图组件

💗 开发/测试/发布流程见该文章：简书

😊 本项目仓库地址Github

第一次封装组件，肯定有许多边界问题没有考虑到，如果出现问题，欢迎给我提 issue。

API

| Property | Description | Type | Default | Optional | | ---------------- | ----------------------------------------- | ------ | --------- | ----------------------------- | | width | container width | number | 730 | | height | container height | number | 336 | | autoplay | switch automatically | bool | true | true,false | | autoplayInterval | automatic switch interval(ms) | number | 3000 | | dots | whether to show the page button below | bool | true | true,false | | dotsColor | page button color | string | '#31A896' | any css color value in string | | dotsSize | page button size | string | 'normal' | 'normal','small' , 'large' | | arrows | whether to show flip button on both sides | bool | true | true, false | | arrowsType | flip button color | string | 'light' | 'dark' , 'light' | | onChange | switch callback |

可选参数：

static propTypes = {
    width: PropTypes.number,
    height: PropTypes.number,
    autoplay: PropTypes.bool,
    autoplayInterval: PropTypes.number,
    dots: PropTypes.bool,
    dotsColor: PropTypes.string,
    dotsSize: PropTypes.oneOf(['normal', 'small', 'large']),
    arrows: PropTypes.bool,
    arrowsType: PropTypes.oneOf(['dark', 'light']),
    onChange: PropTypes.func,
  };

基本使用：

• npm

npm install react-tiny-swiper

import toolbox from "react-tiny-swiper";
const { Swiper } = toolbox;
const renderSwiper = items => {
  const setting = {
    width: 730,
    height: 336,
    autoplay: true,
    autoplayInterval: 3000,
    arrows: true,
    arrowsType: "light",
    dots: true,
    dotsColor: "red",
    dotsSize: "normal"
  };
  return (
    <Swiper {...setting}>
      {items.map(item => (
        <div key={item.imgurl}>
          <img src={item.imgurl} alt="swiper" />
        </div>
      ))}
    </Swiper>
  );
};