如何用CSS让React SwiperJs的按钮显示在容器外？

要让Swiper的导航按钮显示在容器外部，核心是调整容器的溢出规则和按钮的定位属性，具体步骤如下：

1. 允许容器内容溢出 #

默认Swiper容器会设置overflow: hidden来隐藏超出的slide，需要覆盖这个属性让按钮能显示在外部：

.swiper {
  overflow: visible !important;
  position: relative; /* 确保按钮基于容器定位 */
}

2. 调整导航按钮的绝对定位 #

通过绝对定位把按钮移到容器外侧，同时保持垂直居中：

/* 统一设置按钮基础样式 */
.swiper-button-prev,
.swiper-button-next {
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* 单独设置左右按钮的位置 */
.swiper-button-prev {
  left: -50px; /* 往左移出容器，数值根据需求调整 */
}

.swiper-button-next {
  right: -50px; /* 往右移出容器，数值根据需求调整 */
}

3. 优化按钮图标（可选） #

如果默认箭头的位置或样式不符合需求，可以调整：

.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 18px;
  color: #333333;
}

注意事项 #

如果你的Swiper嵌套在其他父容器中，要确保父容器也设置了overflow: visible，否则按钮会被父容器裁剪。

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