如何调整React Swiper组件中幻灯片切换按钮的位置

我在使用React Swiper组件时遇到了幻灯片切换按钮遮挡其他组件的问题，需要将swiper-button-prev和swiper-button-next按钮移到黑色盒子的侧边。根据@Guillaume的建议，通过修改这两个CSS类即可实现：

1. 自定义导航按钮样式 #

直接覆盖Swiper的默认按钮样式，调整定位属性将按钮移到盒子外侧，示例代码如下：

/* 调整上一页按钮到盒子左侧外侧 */
.swiper-button-prev {
  position: absolute;
  left: -50px; /* 根据实际布局调整数值 */
  top: 50%;
  transform: translateY(-50%);
}

/* 调整下一页按钮到盒子右侧外侧 */
.swiper-button-next {
  position: absolute;
  right: -50px; /* 根据实际布局调整数值 */
  top: 50%;
  transform: translateY(-50%);
}

如果默认样式优先级过高，可以给选择器添加父元素类名提升优先级，或者临时用!important覆盖（不推荐长期使用）。

2. 确保导航功能正常启用 #

在React Swiper组件中配置navigation模块，保证按钮正常渲染：

import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/navigation';
import { Navigation } from 'swiper/modules';

const MySwiper = () => {
  return (
    <Swiper
      modules={[Navigation]}
      navigation={true}
      // 其他Swiper配置项
    >
      <SwiperSlide>幻灯片内容1</SwiperSlide>
      <SwiperSlide>幻灯片内容2</SwiperSlide>
    </Swiper>
  );
};

export default MySwiper;

效果示意图 #

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