react-tiny-swiper v1.0.3

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

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

😊 本项目仓库地址Github

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

API

可选参数：

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>
  );
};