如何在React（Next.js）中自定义Swiper JS的分页器与箭头组件

Swiper本身就支持完全自定义分页、箭头组件，不用只局限于CSS修改，通过组件传参就能实现专属样式的控件，具体实现步骤如下：

1. 基础准备 #

确保已安装Swiper的React版本：

npm install swiper
# 或用yarn
yarn add swiper

2. 自定义分页器组件 #

创建专属分页圆点组件，借助Swiper提供的useSwiper hook获取实例状态，控制激活态：

// components/CustomPagination.jsx
import { useSwiper } from 'swiper/react';

export default function CustomPagination() {
  const swiper = useSwiper();
  const slidesCount = swiper.slides.length;

  if (slidesCount <= 1) return null;

  return (
    <div className="custom-pagination">
      {Array.from({ length: slidesCount }).map((_, index) => (
        <button
          key={index}
          className={`pagination-dot ${swiper.activeIndex === index ? 'active' : ''}`}
          onClick={() => swiper.slideTo(index)}
          aria-label={`跳转到第${index + 1}张幻灯片`}
        />
      ))}
    </div>
  );
}

之后你可以自由编写CSS，定义.custom-pagination和.pagination-dot的大小、颜色、激活态样式等。

3. 自定义箭头组件 #

同样用useSwiper获取实例，实现上/下页切换控制，还能根据首尾状态禁用箭头：

// components/CustomNavigation.jsx
import { useSwiper } from 'swiper/react';
// 可替换成你自己的图标、SVG或图片
import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';

export default function CustomNavigation() {
  const swiper = useSwiper();

  return (
    <div className="custom-navigation">
      <button
        className="nav-btn prev-btn"
        onClick={() => swiper.slidePrev()}
        disabled={swiper.isBeginning}
        aria-label="上一张幻灯片"
      >
        <FaChevronLeft />
      </button>
      <button
        className="nav-btn next-btn"
        onClick={() => swiper.slideNext()}
        disabled={swiper.isEnd}
        aria-label="下一张幻灯片"
      >
        <FaChevronRight />
      </button>
    </div>
  );
}

4. 在Swiper中引入自定义组件 #

在页面或父组件里，导入Swiper核心组件和你的自定义控件，通过配置属性传入：

// pages/MySwiperPage.jsx
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css'; // 若完全自定义样式，可省略此导入
import CustomPagination from '../components/CustomPagination';
import CustomNavigation from '../components/CustomNavigation';

export default function MySwiperPage() {
  return (
    <div className="swiper-container">
      <Swiper
        spaceBetween={20}
        slidesPerView={1}
        // 传入自定义分页组件
        pagination={{ el: <CustomPagination /> }}
        // 传入自定义导航箭头
        navigation={{
          prevEl: document.querySelector('.prev-btn'),
          nextEl: document.querySelector('.next-btn')
        }}
      >
        <SwiperSlide>
          <div className="slide-content">幻灯片1</div>
        </SwiperSlide>
        <SwiperSlide>
          <div className="slide-content">幻灯片2</div>
        </SwiperSlide>
        <SwiperSlide>
          <div className="slide-content">幻灯片3</div>
        </SwiperSlide>
      </Swiper>
      {/* 把自定义导航组件放在Swiper外层，方便定位 */}
      <CustomNavigation />
    </div>
  );
}

关键注意点 #

• useSwiper hook只能在Swiper组件的子组件或同级范围内使用，否则无法获取实例
• 若不需要Swiper默认样式，可删除swiper/css导入，完全用自定义CSS控制所有元素
• 自定义组件内可自由添加动画、hover效果等，不受默认样式限制

内容的提问来源于stack exchange，提问作者Ree