如何用自定义SVG箭头替换Swiper JS自带箭头并实现功能？

问题分析 #

当前代码存在两个核心问题：

1. navigation={true}会自动渲染Swiper原生箭头，同时手动添加了无交互的自定义箭头，导致页面出现两组箭头
2. 自定义箭头未绑定Swiper的切换方法，无法触发轮播切换

解决方案 #

通过以下步骤替换原生箭头并赋予自定义箭头功能：

• 移除Swiper自动生成箭头的配置，避免原生箭头渲染
• 使用useRef钩子保存Swiper实例，用于调用切换方法
• 给自定义箭头按钮绑定点击事件，调用Swiper实例的切换方法

修改后的完整代码 #

import React, { useRef } from "react";
import sportsList from "../utils/sportsList";
import Card from "./Card";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/navigation";
import { Navigation } from "swiper";

export default function SliderComponent() {
  // 保存Swiper实例的ref
  const swiperRef = useRef(null);

  return (
    <>
      <Swiper
        spaceBetween={50}
        slidesPerView={4}
        onSlideChange={() => console.log("slide change")}
        onSwiper={(swiper) => {
          console.log(swiper);
          // 将实例赋值给ref
          swiperRef.current = swiper;
        }}
        grabCursor={true}
        modules={[Navigation]}
        // 移除navigation={true}，不再渲染原生箭头
        breakpoints={{
          320: {
            slidesPerView: 1,
            spaceBetween: 24,
          },
          480: {
            slidesPerView: 2,
            spaceBetween: 24,
          },
          640: {
            slidesPerView: 6,
            spaceBetween: 24,
          },
          1024: {
            slidesPerView: 6,
            spaceBetween: 32,
            slidesPerGroup: 1,
          },
          1336: {
            slidesPerView: 6,
            spaceBetween: 32,
          },
        }}
        className="relative w-10/12 mx-auto flex flex-row"
        // 将ref绑定到Swiper组件
        ref={swiperRef}
      >
        <div className="absolute inset-y-0 left-0 z-10 flex items-center">
          {/* 绑定上一页切换事件 */}
          <button 
            className="bg-white -ml-2 lg:-ml-4 flex justify-center items-center w-10 h-10 rounded-full shadow focus:outline-none"
            onClick={() => swiperRef.current?.slidePrev()}
          >
            <svg
              viewBox="0 0 20 20"
              fill="currentColor"
              className="chevron-left w-6 h-6"
            >
              <path
                fill-rule="evenodd"
                d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
                clip-rule="evenodd"
              ></path>
            </svg>
          </button>
        </div>

        {sportsList.map((item) => {
          return (
            <SwiperSlide key={item.id}>
              <Card item={item} />
            </SwiperSlide>
          );
        })}

        <div className="absolute inset-y-0 right-0 z-10 flex items-center">
          {/* 绑定下一页切换事件 */}
          <button 
            className="bg-white -mr-2 lg:-mr-4 flex justify-center items-center w-10 h-10 rounded-full shadow focus:outline-none"
            onClick={() => swiperRef.current?.slideNext()}
          >
            <svg
              viewBox="0 0 20 20"
              fill="currentColor"
              className="chevron-right w-6 h-6"
            >
              <path
                fill-rule="evenodd"
                d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                clip-rule="evenodd"
              ></path>
            </svg>
          </button>
        </div>
      </Swiper>
    </>
  );
}

关键修改说明 #

• 引入useRef并创建swiperRef，用于存储Swiper实例
• 在onSwiper回调中把实例赋值给swiperRef.current，确保能获取到可用的实例
• 移除navigation={true}，阻止Swiper渲染原生箭头
• 给左右箭头按钮分别添加onClick事件，调用slidePrev()和slideNext()实现切换
• 统一将代码中的class改为React规范的className

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