当前位置：首页 > React

react如何使用swiper

2026-02-11 19:10:30React

在 React 中使用 Swiper

Swiper 是一个流行的触摸滑动组件，支持移动端和桌面端。以下是在 React 项目中集成 Swiper 的详细步骤。

安装 Swiper 依赖

确保项目已安装 Swiper 的核心库和 React 组件。通过 npm 或 yarn 安装：

npm install swiper react-id-swiper
# 或
yarn add swiper react-id-swiper

基本用法示例

创建一个简单的轮播组件，导入 Swiper 的核心样式和模块：

import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Pagination, Navigation } from 'swiper';
import 'swiper/swiper-bundle.min.css';

// 安装 Swiper 模块
SwiperCore.use([Pagination, Navigation]);

const MySwiper = () => {
  return (
    <Swiper
      slidesPerView={3}
      spaceBetween={30}
      pagination={{ clickable: true }}
      navigation
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
    </Swiper>
  );
};

export default MySwiper;

自定义配置选项

Swiper 支持丰富的配置参数，例如自动播放、循环模式、响应式断点等：

<Swiper
  loop={true}
  autoplay={{ delay: 2500 }}
  breakpoints={{
    640: { slidesPerView: 2 },
    1024: { slidesPerView: 4 }
  }}
>
  {/* 幻灯片内容 */}
</Swiper>

使用第三方样式

若需自定义样式，可以覆盖默认的 Swiper CSS 或引入第三方主题：

import 'swiper/swiper.min.css';
import 'swiper/components/navigation/navigation.min.css';

事件与回调

通过回调函数处理 Swiper 事件，例如滑动开始或结束：

<Swiper
  onSlideChange={() => console.log('Slide changed')}
  onSwiper={(swiper) => console.log(swiper)}
>
  {/* 幻灯片内容 */}
</Swiper>

动态加载幻灯片

结合 React 状态管理动态渲染幻灯片内容：

const [slides, setSlides] = useState([1, 2, 3]);

return (
  <Swiper>
    {slides.map((item) => (
      <SwiperSlide key={item}>Item {item}</SwiperSlide>
    ))}
  </Swiper>
);