在Swiper + React中显示"PREV“和"NEXT”字样，而不是导航箭头

在Swiper + React中显示"PREV"和"NEXT"字样，而不是导航箭头可以通过以下步骤实现：

步骤1：安装Swiper和React 首先，你需要在你的项目中安装Swiper和React。你可以使用npm或yarn来安装它们。

npm install swiper react swiper --save

或者

yarn add swiper react swiper

步骤2：导入所需的模块和样式在你的React组件文件中，导入所需的Swiper组件和样式。

import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper.min.css';

步骤3：设置Swiper选项在你的组件中，设置Swiper的选项。你可以在Swiper组件中使用options属性来定义Swiper的选项。

const swiperOptions = {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
};

步骤4：创建Swiper组件在你的组件中，创建Swiper组件，并在其中定义Swiper的每个滑块。

const MySwiperComponent = () => {
  return (
    <Swiper {...swiperOptions}>
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
    </Swiper>
  );
};

步骤5：创建自定义导航按钮为了显示"PREV"和"NEXT"字样而不是默认的导航箭头，你需要在你的组件中创建自定义的导航按钮。

const MySwiperComponent = () => {
  return (
    <div>
      <Swiper {...swiperOptions}>
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
      </Swiper>
      <div className="swiper-navigation">
        <div className="swiper-button-prev">PREV</div>
        <div className="swiper-button-next">NEXT</div>
      </div>
    </div>
  );
};

步骤6：添加样式最后，在你的组件中添加样式来定义自定义导航按钮的外观。

.swiper-navigation {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.swiper-button-prev,
.swiper-button-next {
  background-color: #ccc;
  padding: 5px 10px;
  cursor: pointer;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  background-color: #aaa;
}

现在，你的Swiper组件将显示"PREV"和"NEXT"字样的导航按钮，而不是默认的导航箭头。

备注：以上所述的步骤是基于Swiper库和React的默认配置。如果你在使用其他定制或版本的Swiper或React，请根据它们的文档进行适当的配置和调整。

推荐的腾讯云相关产品和产品介绍链接地址：