一款更轻便、好用的react轮播组件

日常开发中，经常遇到要开发轮播组件的需求，身为一名前端页面仔，本着拿来主义，当然是去npm上拔拔看有没有合适的库。惊奇的发现react版本的swiper组件库出奇的少，绝大多数轮播组件库都依赖于swiper组件。的确swiper组件丰富的api的确能够满足日常的开发，但是过于庞大的体积以及在最新版本的一些小bug让我不得不放弃，所以撸了一个简单的swiper组件库去应付日常的开发。

先放上轮子的地址 react-tiga-swiper，求star。

Install

npm install --save react-tiga-swiper

Usage

import React, { Component } from 'react'

import Swiper,{SwipeRef} from 'react-tiga-swiper'
const swiperData = ["green", "red", "yellow", "black"];

function Example(props){

  const swiperRef = useRef(null);
  const [index, setIndex] = useState();

  const swipeTo = () => {
    const swiperInstance = swiperRef.current;
    const currPage: string = index * 1 + '';
    swiperInstance?.swipeTo(parseInt(currPage, 10));
  };

  const prev = () => {
    const swiperInstance = swiperRef.current;
    swiperInstance?.prev();
  };

  const next = () => {
    const swiperInstance = swiperRef.current;
    swiperInstance?.next();
  };

  const onChange = (currPage: number, prevPage: number) => {
    console.log(currPage, prevPage);
  };
  
  return (
    <>
      

         setIndex(e.target.value)}
        />
        手动跳转页面
        上一页
        下一页
      
      
        {swiperData.map((item: string, key) => (
          
{key + 1}
        ))}
      
    
  )
}

API

参数	说明	类型	默认值	备选值
duration	切换动画持续时间(ms)	number	300
autoPlay	自动切换间隔时间(ms)	number	3000
touchable	是否允许滑动	bool	true
showIndicators	是否显示两侧翻页按钮	bool	true
showDots	是否显示底部dots	bool	true
dots	底部dots	React.ReactNode	null
indicator	两侧翻页按钮	React.ReactNode	null
style	自定义额外样式	React.CSSProperties	{}
className	自定义额外类名	string	''
onChange	切换时回调函数	(current: number, prev: number): void	noop

实例方法

方法名	说明	参数名	参数描述
swipeTo	手动切换轮播图	index	需要切换的轮播图索引,从 0 开始
prev	切换至上一张轮播图
next	切换至下一张轮播图