react中各类轮播swiper、走马灯Carousel使用（ant.design、antd-mobile、swiper整合文档）_ant组件库carousel组件如何控制屏幕上同时显示的幻灯片数量

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
1
2
3
4
5
6
7
8

调用：

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>
  )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

二：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
1
2
3
4
5
6
7
8

调用：

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>
  )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

三：ant design 使用轮播

点击查看官方案例 https://ant.design/components/carousel-cn/

引用（哪个都行）：

npm方式：
	npm install --save antd

cnpm方式：
	cnpm install --save antd

yarn方式：
	yarn add antd
1
2
3
4
5
6
7
8

调用：

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>
  )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

四：引用swiper插件

引用（哪个都行）：

npm方式：
	npm install --save swiper

cnpm方式：
	cnpm install --save swiper

yarn方式：
	yarn add swiper
1
2
3
4
5
6
7
8

使用：

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>
  )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

到此，基本上常用的react中各类使用情况都包括了。有兴趣的手写也可以。