react组件轮播图

轮播图实现的思路，当我们的图片自动向左轮播的时候，当轮播到最后一张图片时，我们要让他从第一张图片开始轮播，并且需要跟最后一张图片衔接上，才是一个完整的轮播图

首先我们在根组件中封装两个组件

import Swiper from '../lunbo/Swper';
import SwiperItem from '../lunbo/SwperITtem';

function App() {
  return (
    <div className="App">

        <Swiper autoplay={true} loop={true}>
            <SwiperItem>
              <img src="https://img.alicdn.com/imgextra/i2/26958996/O1CN010NKdKC2GKDl4rmWjn_!!0-saturn_solar.jpg_468x468q75.jpg_.webp"/>
            </SwiperItem>
            <SwiperItem>
              <img src="https://img.alicdn.com/imgextra/i2/119181013/O1CN01UBWPhA1JLzxX8yEOC_!!0-saturn_solar.jpg_468x468q75.jpg_.webp"/>
            </SwiperItem>
            <SwiperItem>
              <img src="https://img.alicdn.com/imgextra/i3/98494397/O1CN0138Jp1m1iLsBqwct3T_!!0-saturn_solar.jpg_468x468q75.jpg_.webp"/>
            </SwiperItem>
        </Swiper>
    </div>
  );
}
export default App;

Swiper是我们包裹图片的盒子组件，SwiperItem是图片组件

Swiper传递的两个参数，当autoplay为true时，图片自动进行轮播，loop为true的话，那么就复制第一张图片的dom节点

SwiperItem组件

import React from 'react'

export default function Item(props) {
    
  return (
    <li>
        {props.children}
    </li>
  )
}

Swiper组件

import React, { Component } from