react 实现手机端首页无缝轮播

首先要注明一下本人是首次写js相关博客，如有什么错误的地方，还请大家多多指正！谢谢！！！

其中关于轮播部分有部分参考了一下这位前辈的代码，也是让我对无缝轮播有个清楚的概念，也很感谢这位前辈。
http://www.jianshu.com/p/1b1a06b579b2

目前掌握的概念：
实现轮播可以采用transform中的translate，左移为transform: translate(-xx px) + transition:0.5s

一共设置三层结构，最外层div为整个屏幕的宽度；ul为所有图片的宽度，可以设置为图片张数＊100％；而里面每个li也是当前屏幕的宽度，可以设置为ul宽度／图片张数，这样使用translate时就可以实现translate(-屏幕宽度*当前图片位置)即可显示下一张图

```
html：
<div class="slider">
    <ul class="lunbo">
            <li class="slider-item" style="width: 25%;"><img src="a"></li>
            <li class="slider-item" style="width: 25%;"><img src="b"></li>
            <li class="slider-item" style="width: 25%;"><img src="a"></li>
            <li class="slider-item" style="width: 25%;"><img src="b"></li>
    </ul>
    //下面部分为dot
    <div class="slider-dots-wrap">
        <span class="slider-dot"></span>
        <span class="slider-dot"></span>
    </div>
</div>

但是这样的话一旦图片张数轮播结束，后面就是空白，所以可以当图片轮播到最后一张时，将当前所在图片位置设置为0，即回到第一张

但是回到第一张时的动作会与轮播方向相反，因为如果你是左轮播，你的translate从负数转到0，会导致最后一张到第一张是右移

所以可以将需要轮播的图片重新一份加在后面，当然也可以复制第一张图片到最后，方法一样

本文图片为 图a图b图a图b，编号分别为0，1，2，3，0／2相同，1／3相同，当到达3时跳到1继续轮播

＊＊＊react部分，其中轮播是一个slider组件

banner.tsx: //这是调用组件的那个文件，公司用到的是typescript
// 从后台获取到图片数据data
getBannerList(data){
        data = data