// Import Swiper React components
import { Swiper, SwiperSlide } from 'swiper/react';

// Import Swiper styles
import 'swiper/css';

export default () => {
  return (
    <Swiper
      spaceBetween={50}
      slidesPerView={3}
      onSlideChange={() => console.log('slide change')}
      onSwiper={(swiper) => console.log(swiper)}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
      ...
    </Swiper>
  );
};

你需要这样使用……
参考链接：https://swiperjs.com/react#installation

更新你的swiper版本到"swiper": "^7.4.1"，然后使用下面的代码。

import React from 'react'
import { Swiper, SwiperSlide } from 'swiper/react'
import SwiperCore, { Navigation, Pagination, Mousewheel, Keyboard, Autoplay, Virtual, A11y } from 'swiper'

// swiper bundle styles
import 'swiper/swiper-bundle.min.css'

// swiper core styles
import 'swiper/swiper.min.css'

// modules styles
import 'swiper/components/navigation/navigation.min.css'
import 'swiper/components/pagination/pagination.min.css'

// install Swiper modules
SwiperCore.use([Navigation, Pagination, Mousewheel, Keyboard, Autoplay, Virtual, A11y])

const Carousel = ({ data, renderSlide }) => {
    return (
    <Swiper
      mousewheel
      keyboard
      className="mySwiper"
      slidesPerColumnFill="row"
      touchStartPreventDefault={false}
      watchOverflow
    >
        <SwiperSlide>
          <img src="https://www.imperial-library.info/sites/default/files/Fonts_Alphabets_Magic_Script.png" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://www.imperial-library.info/sites/default/files/Fonts_Alphabets_Magic_Script.png" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://www.imperial-library.info/sites/default/files/Fonts_Alphabets_Magic_Script.png" />
        </SwiperSlide>
    </Swiper>
    )
}

export default Carousel

import React, { useRef } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Swiper as SwiperCore } from 'swiper/types';

import "swiper/css";

const swiperRef = useRef<SwiperCore>();  
      <Swiper
        slidesPerView={1}
        onBeforeInit={(swiper) => {
          swiperRef.current = swiper;
        }}
      >
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>

      </Swiper>
      <button onClick={() => swiperRef.current?.slidePrev()}>Prev</button>
      <button onClick={() => swiperRef.current?.slideNext()}>Next</button>