在 React 中自定义 Swiper.js 的上一个/下一个箭头按钮和分页项目符号

2025-05-25

在 React 中自定义 Swiper.js 的上一个/下一个箭头按钮和分页项目符号

我在 React 项目中使用 Swiper.js 库开发图像轮播，并且很难自定义导航按钮和分页项目符号以匹配我的设计，
幸运的是，经过长时间的研究，我找到了解决方案，我将在今天的文章中与您分享。

在本指南中，我们将使用 Swiper 元素（WebComponents）在 React 中设置 Swiper，并在 Swiper 工作后，我们将使用自定义 CSS 自定义导航箭头和分页项目符号。

先决条件

  • 一个正在运行的 React 项目：为了简短起见，我将从一个已经设置好的 React 项目开始，因此，为了继续操作，您需要有一个已经设置好的 React 项目。

我将使用 Vite 按照本指南设置 React 项目，但您也可以使用create-react-app或任何其他您想要的方式。

你可以在这里找到我将使用的 React 设置

  • 代码编辑器：我将使用Visual Studio Code，但您可以随意使用您喜欢的任何编辑器。

  • 由于这是一份 React 指南，我假设您之前具有使用 JavaScript 和 React 应用程序的基本经验。

这就是你所需要的，让我们开始吧

1.安装Swiper

Swiper JS 是一个用于为 Web 和移动设备创建滑块的库，它可以与 Vanilla JavaScript、React、Vue 和 Web 组件很好地集成

您可以通过在终端中运行以下命令来安装 Swiper



# For npm
npm install swiper
# For yarn
yarn add swiper
# For pnpm
pnpm install swiper
Enter fullscreen mode Exit fullscreen mode

这将安装 Swiper 包，允许我们编写滑动逻辑。

在 React 中配置 Swiper

在许多教程和文章中，您会发现 Swipe 在 React 中使用，方法是使用如下所示的 Swiper React 组件。



import { Swiper, SwiperSlide } from 'swiper/react'; // don't use this
Enter fullscreen mode Exit fullscreen mode

根据swiper 文档，由于 Swiper React 组件未来可能会被移除，因此不再推荐这种方式。Swiper
建议使用其 Web 组件，我们也将使用其 Web 组件。

Web 组件
是一组标准化技术，允许开发人员在 Web 应用程序中创建和使用可重用的自定义元素。Web 组件允许您编写自己的 HTML 元素，并轻松地重复使用它们，而无需使用框架。

例如，使用 Web 组件，您可以创建自己的元素，例如<validated-input>，它接受常规 HTML 输入，并向其中添加 CSS 和 JavaScript，这样无论何时使用，它都会带有验证、错误消息和开箱即用的样式。有关 Web 组件的更多信息，请查看以下文章。

Swiper 创建了自己的自定义元素，这些元素经过预先配置，可提供开箱即用的滑动逻辑，其语法看起来就像在编写普通的 HTML

创建一个名为的文件MySwiper.jsx并添加以下代码



import { register } from "swiper/element/bundle";
register();

const MySwiper = () => {
  return (
    <swiper-container navigation="true" pagination="true">
      <swiper-slide class="blue-slide">Slide 1</swiper-slide>
      <swiper-slide class="yellow-slide">Slide 2</swiper-slide>
      <swiper-slide class="green-slide">Slide 3</swiper-slide>
    </swiper-container>
  );
};

export default MySwiper;
Enter fullscreen mode Exit fullscreen mode

在前两行中，我们register从 swiper 包中导入函数，该函数允许我们在组件中使用 Swiper 元素，并且我们通过调用该register()函数来注册它们。

  • 这<swiper-container>是 Swiper 自定义元素（Web 组件），用作 Swiper 幻灯片的包装器（父级）
  • 该navigation = "true"属性用于添加导航箭头，以便我们可以在幻灯片之间导航。
  • 该pagination="true"属性用于添加分页项目符号，指示我们当前所在的幻灯片。
  • 这swiper-slide是另一个创建单独幻灯片的滑动自定义元素
  • 该class属性与用于向元素添加 CSS 样式的普通 HTML 类相同。请注意，即使在 React 中，我们也使用它（您可以在classclassNameReact 文档中阅读更多关于在 React 项目中使用 Web 组件的信息）。

我使用这些类（blue-slide、yellow-slide和green-slide）为每张幻灯片添加不同的背景颜色，并将幻灯片标签文本居中。您可以在此处找到当前的CSS

MySwiper在应用程序的入口处添加这些样式并导入组件后，您应该在浏览器中看到以下结果。

基本刷卡器

您可能已经注意到，当前导航按钮的颜色不清晰，分页项目符号太小而看不见，因此我们需要对其进行自定义。

默认情况下，Swiper 提供以下 CSS 类

  • swiper-pagination-bullet: 用于设置分页项目符号的样式
  • swiper-pagination-bullet-active：用于设置活动分页项目符号的样式
  • .swiper-button-next：用于设置下一个（右）导航箭头的样式
  • .swiper-button-prev：用于设置上一个（左）导航箭头的样式

但这里的问题在于，尝试直接从我们的 CSS 文件将自定义 CSS 添加到这些类中是行不通的，因为 Web 组件在它们自己的 DOM 中是孤立的，因此我们的 CSS 样式可能无法到达它们。

要添加自定义样式，我们需要将样式直接注入到组件本身中，并且我们将使用 React refs。

更新MySwiper组件如下



import { useEffect, useRef } from "react";
import { register } from "swiper/element/bundle";
register();

const MySwiper = () => {
  const swiperRef = useRef(null);

  useEffect(() => {
    const swiperContainer = swiperRef.current;
    const params = {
      navigation: true,
      pagination: true,
    };

    Object.assign(swiperContainer, params);
    swiperContainer.initialize();
  }, []);

  return (
    <swiper-container ref={swiperRef} init="false"> 
      <swiper-slide class="blue-slide">Slide 1</swiper-slide>
      <swiper-slide class="yellow-slide">Slide 2</swiper-slide>
      <swiper-slide class="green-slide">Slide 3</swiper-slide>
    </swiper-container>
  );
};

export default MySwiper;
Enter fullscreen mode Exit fullscreen mode

这与我们之前的配置完全相同，但我们改变了访问 swiper 容器的方式。

  • 首先我们引入了React useRef钩子，它允许我们访问 swiper 容器的 DOM 节点。我们在这个过程中使用它来在 React 完成页面渲染后访问 swiper 容器（这样它就不会为 null）。你可以在这里useEffect阅读更多关于使用 refs 操作 DOM 的内容。

  • 我们创建了这个params对象，并将之前的导航和分页配置移到了那里。从现在起，所有关于滑动面板的自定义设置都将在这个对象中。

  • 定义好 swiper 配置后，我们使用Object.assign() 方法将它们复制到 swiper 容器中

  • 请注意我们如何添加属性init="false"以确保在应用我们的自定义配置之前滑动器不会渲染。

  • swiperContainer.initialize()：应用配置后，我们最终初始化 swiper。

添加自定义样式

Swiper 容器接收另一个属性injectStyles，它是一个字符串数组，其中每个字符串将包含应用于 Swiper 元素的 CSS 样式

要应用自定义样式，请添加以下更改（我仅提到我更改的前一个文件的一部分，其他所有内容保持不变）



  useEffect(() => {
    const swiperContainer = swiperRef.current;
    const params = {
      navigation: true,
      pagination: true,
      // These are new...
      injectStyles: [
        `
          .swiper-button-next,
          .swiper-button-prev {
            background-color: white;
            padding: 8px 16px;
            border-radius: 100%;
            border: 2px solid black;
            color: red;
          }
          .swiper-pagination-bullet{
            width: 40px;
            height: 40px;
            background-color: red;
          }
      `,
      ],
    };

    Object.assign(swiperContainer, params);
    swiperContainer.initialize();
  }, []);
Enter fullscreen mode Exit fullscreen mode

我们刚刚引入了自定义样式，其中我们针对下一个和上一个按钮（使用我之前提到的 CSS 类），并添加更改它们的颜色red并添加带有黑色边框的白色圆形背景。

在分页项目符号上，我们增加了宽度和高度，40px并将其颜色更改为red

应用这些更改后，您应该在浏览器中看到以下结果

自定义滑动条后的结果

您可以在此Github repo中找到当前进度

奖金

如果你想改变箭头并使用完全自定义的箭头怎么办？你可以使用以下代码实现



  useEffect(() => {
    const swiperContainer = swiperRef.current;
    const params = {
      navigation: true,
      pagination: true,
      //add this
      injectStyles: [
        `
          .swiper-button-next,
          .swiper-button-prev {
            background-color: white;
            background-position: center;
            background-size: 40px;
            background-repeat: no-repeat;
            padding: 8px 16px;
            border-radius: 100%;
            border: 2px solid black;
            color: red;
          }

          .swiper-button-prev {
            background-image: url("/box-arrow-in-left.svg");
          }

          .swiper-button-next {
            background-image: url("/box-arrow-in-right.svg");
          }

          .swiper-button-next::after,
          .swiper-button-prev::after {
            content: "";
          }

          .swiper-pagination-bullet{
            width: 40px;
            height: 40px;
            background-color: red;
          }
      `,
      ],
    };

    Object.assign(swiperContainer, params);
    swiperContainer.initialize();
  }, []);
Enter fullscreen mode Exit fullscreen mode

我们为下一个和上一个按钮提供了自定义 svg 图标（我下载了 svg 图标并将它们添加到项目的公共文件夹中），方法是将它们设置为背景图像并删除背景重复并设置背景大小和背景位置。



 .swiper-button-next::after,.swiper-button-prev::after {
    content: "";
 }
Enter fullscreen mode Exit fullscreen mode

这部分是为了隐藏 Swiper 本身提供的默认图标，因为我们使用自定义图标

这是添加自定义箭头后的结果

添加自定义箭头后的结果

就是这样，这就是使用 Swiper Web 组件自定义导航按钮和分页项目符号的方法。希望对您有所帮助。

您可以在Github Repo中找到最终代码

文章来源：https://dev.to/ivadyhabimana/customizing-swiperjs-prevnext-arrow-buttons-and-pagination-bullets-in-react-3gkh
Devto 翻译
PREV
我从八年的远程开发生涯中学到了什么
NEXT
我作为开发人员如何使用 Notion