react里怎么使用swiper的 Effect cards

在React中使用Swiper组件需要先安装Swiper库。你可以通过npm或yarn来安装：

npm install swiper --save
# 或者
yarn add swiper

然后，在React项目中，通常的做法是创建一个自定义组件，比如`SwipeableCards`，并利用Swiper提供的API。以下是一个简单的例子：

import React from 'react';
import SwiperCore, { Navigation } from 'swiper';
import Swiper from 'swiper/react';

// 引入Swiper样式
import 'swiper/dist/css/swiper.css';

SwiperCore.use([Navigation]);

const SwipeableCards = ({ items }) => {
  return (
    <Swiper
      navigation={{
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }}
      // 设置 Swiper 的基本配置
      spaceBetween={30}
      slidesPerView="auto"
      loop
    >
      {items.map((item, index) => (
        <div key={index} className="swiper-slide">
          {/* 根据实际需求添加卡片内容 */}
          <p>{item.title}</p>
          <img src={item.image} alt={item.alt} />
        </div>
      ))}
      {/* 添加导航按钮 */}
      <div className="swiper-button-next"></div>
      <div className="swiper-button-prev"></div>
    </Swiper>
  );
};

export default SwipeableCards;

在这个组件中，你需要提供一个数组 `items`，每个元素包含标题、图片等数据。记得根据你的实际布局和样式调整CSS。