如何让SwiperJS导航按钮高度适配父容器而非占满整个屏幕

问题根源 #

导航按钮为绝对定位元素，默认会以最近的非static定位的祖先元素作为百分比宽高、定位的参照基准。你当前没有给轮播容器.swiper-container设置相对定位，导致按钮的height: 100%以整个视口为基准，所以会占满屏幕高度。

修复步骤 #

1. 给轮播父容器添加相对定位

.thumbTiles.swiper-container {
  position: relative;
  /* 若需要按钮超出轮播区域也能正常显示，可添加以下属性 */
  overflow: visible;
}

2. 调整导航按钮的定位偏移，确保紧贴容器左右边缘

.thumbTiles .swiper-button-prev,
.thumbTiles .swiper-button-next {
  height: 100%;
  width: calc(4% - 5px);
  top: 0;
  bottom: 0;
  margin: 0;
  background-color: rgba(20, 20, 20, 0.5);
  /* 重置Swiper默认的左右偏移 */
  left: 0;
  right: auto;
}
/* 单独配置下一页按钮的右对齐 */
.thumbTiles .swiper-button-next {
  left: auto;
  right: 0;
}

可选优化（匹配Netflix交互效果） #

可以添加hover显隐效果，鼠标移入轮播区域才显示导航按钮：

.thumbTiles .swiper-button-prev,
.thumbTiles .swiper-button-next {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.thumbTiles:hover .swiper-button-prev,
.thumbTiles:hover .swiper-button-next {
  opacity: 1;
}
/* 调整箭头样式 */
.thumbTiles .swiper-button-prev::after,
.thumbTiles .swiper-button-next::after {
  color: #fff;
  font-size: 22px;
}

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