当前位置：首页 > React

react如何使用swiper

2026-01-15 10:18:41React

安装 Swiper 依赖

在 React 项目中使用 Swiper 前，需要安装 Swiper 的核心库和 React 组件库。通过 npm 或 yarn 安装以下依赖：

npm install swiper react-id-swiper

或者

yarn add swiper react-id-swiper

引入 Swiper 组件和样式

在 React 组件中引入 Swiper 的 React 封装库 react-id-swiper 以及 Swiper 的样式文件。确保样式文件正确引入，否则轮播效果可能无法正常显示。

import React from 'react';
import Swiper from 'react-id-swiper';
import 'swiper/swiper-bundle.min.css';

配置 Swiper 参数

Swiper 的配置通过 params 对象传递。可以根据需求设置轮播方向、自动播放、分页器等选项。

const params = {
  slidesPerView: 3,
  spaceBetween: 30,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
};

渲染 Swiper 组件

将配置传递给 Swiper 组件，并在其内部放置需要轮播的内容。每个轮播项用 div 包裹，并添加 swiper-slide 类名。

function MySwiper() {
  return (
    <Swiper {...params}>
      <div className="swiper-slide">Slide 1</div>
      <div className="swiper-slide">Slide 2</div>
      <div className="swiper-slide">Slide 3</div>
    </Swiper>
  );
}

自定义样式和功能

如果需要进一步自定义样式或功能，可以通过覆盖 Swiper 的 CSS 类名或扩展配置参数实现。例如，调整分页器的样式或添加懒加载功能。

const customParams = {
  lazy: true,
  autoplay: {
    delay: 2500,
    disableOnInteraction: false,
  },
};

处理动态数据

当轮播内容来自动态数据时，可以通过遍历数据生成轮播项。确保为每个项添加唯一的 key 属性。

const slides = ['Item 1', 'Item 2', 'Item 3'];

function DynamicSwiper() {
  return (
    <Swiper {...params}>
      {slides.map((slide, index) => (
        <div key={index} className="swiper-slide">
          {slide}
        </div>
      ))}
    </Swiper>
  );
}