react的 轮播图（要么叫做：走马灯）方案：要么引用ui框架，要么引用插件，要么自己手写（不建议，要处理兼容，有坑）。
本文目录：
一：antd-mobile（V2）使用Carousel走马灯
二：antd-mobile（V5）使用Swiper轮播
三：ant design 使用Swiper轮播
四：引用swiper插件
一：antd-mobile（V2） 走马灯Carousel
点击查看官方案例 https://antd-mobile-v2.surge.sh/components/carousel-cn#components-carousel-demo-lottery
引用（哪个都行）：
npm方式：
npm install --save antd-mobile
cnpm方式：
cnpm install --save antd-mobile
yarn方式：
yarn add antd-mobile
调用：
import React, {
useState } from 'react';
import {
Carousel } from 'antd-mobile';
export default function () {
const [bannerList, setBannerList] = useState([
'https://zos.alipayobjects.com/rmsportal/AiyWuByWklrrUDlFignR.png',
'https://zos.alipayobjects.com/rmsportal/TekJlZRVCjLFexlOCuWn.png',
'https://zos.alipayobjects.com/rmsportal/IJOtIlfsYdTyaDTRVrLI.png',
]);
{
/* 轮播 */ }
return (
<Carousel
autoplay
infinite
autoplayInterval={
2000}
className='bannerSwiper'
>
{
bannerList.map(val => (
<img
key={
val}
src={
val}
alt=""
style={
{
width: '100%', verticalAlign: 'top' }}
/>
))}
</Carousel>
)
}
二：antd-mobile（V5） 使用轮播
点击查看官方案例 https://mobile.ant.design/components/swiper
引用（哪个都行）：
npm方式：
npm install --save antd-mobile@next
cnpm方式：
cnpm install --save antd-mobile@next
yarn方式：
yarn add antd-mobile@next
调用：
import React, {
useRef } from 'react'
import {
Swiper } from 'antd-mobile'
const bannerList = [
'https://zos.alipayobjects.com/rmsportal/AiyWuByWklrrUDlFignR.png',
'https://zos.alipayobjects.com/rmsportal/TekJlZRVCjLFexlOCuWn.png',
'https://zos.alipayobjects.com/rmsportal/IJOtIlfsYdTyaDTRVrLI.png',
];
const items = bannerList.map((item, index) => (
<Swiper.Item key={
index}>
<img
src={
item}
alt=''
/>
</Swiper.Item>
))
export default () => {
return (
<Swiper
loop
autoplay
>
{
items}
</Swiper>
)
}
三：ant design 使用轮播
点击查看官方案例 https://ant.design/components/carousel-cn/
引用（哪个都行）：
npm方式：
npm install --save antd
cnpm方式：
cnpm install --save antd
yarn方式：
yarn add antd
调用：
import React, {
useState } from 'react';
import {
Carousel } from 'antd';
export default function () {
const [bannerList, setBannerList] = useState([
'https://zos.alipayobjects.com/rmsportal/AiyWuByWklrrUDlFignR.png',
'https://zos.alipayobjects.com/rmsportal/TekJlZRVCjLFexlOCuWn.png',
'https://zos.alipayobjects.com/rmsportal/IJOtIlfsYdTyaDTRVrLI.png',
]);
return (
<Carousel
autoplay
>
{
bannerList.map((item, index) => {
return (
<img
src={
item}
alt=''
/>
)
})}
</Carousel>
)
}
四：引用swiper插件
引用（哪个都行）：
npm方式：
npm install --save swiper
cnpm方式：
cnpm install --save swiper
yarn方式：
yarn add swiper
使用：
import React, {
useState } from 'react';
import {
Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, {
Autoplay, Pagination } from 'swiper';
SwiperCore.use([Autoplay, Pagination]);
export default function () {
const [bannerList, setBannerList] = useState([
'https://zos.alipayobjects.com/rmsportal/AiyWuByWklrrUDlFignR.png',
'https://zos.alipayobjects.com/rmsportal/TekJlZRVCjLFexlOCuWn.png',
'https://zos.alipayobjects.com/rmsportal/IJOtIlfsYdTyaDTRVrLI.png',
]);
{
/* 轮播 */ }
return (
<Swiper
autoplay={
{
delay: 2500, disableOnInteraction: false }}
pagination={
{
clickable: true }}
>
{
bannerList.map((item, index) => {
return (
<SwiperSlide key={
index}>
<div className='banners-wrap'>
<img
src={
item}
alt=''
/>
</div>
</SwiperSlide>
);
})}
</Swiper>
)
}
到此，基本上常用的react中各类使用情况都包括了。有兴趣的手写也可以。