如何实现Swiper轮播图中按钮仅在指定幻灯片显示？

问题核心是你把按钮放在了轮播容器外部，属于全局定位元素，所以会在所有幻灯片上方持续显示。正确做法是将按钮嵌入对应幻灯片内部，让按钮成为幻灯片的一部分，这样只有当前激活的幻灯片里的按钮才会被展示。

修改后的HTML代码 #

<div class="swiper">
  <div class="swiper-wrapper">
    <!-- 第1张幻灯片 - 带专属按钮 -->
    <div class="swiper-slide">
      <img src="images/banner-1.jpeg">
      <button class="slide-btn btn-1">Shop Now</button>
    </div>
    <!-- 第2张幻灯片 - 带专属按钮 -->
    <div class="swiper-slide">
      <img src="images/banner-2.jpeg">
      <button class="slide-btn btn-2">View Details</button>
    </div>
    <!-- 其余无按钮的幻灯片 -->
    <div class="swiper-slide">
      <img src="images/banner-3.jpeg">
    </div>
    <div class="swiper-slide">
      <img src="images/banner-4.jpeg">
    </div>
    <div class="swiper-slide">
      <img src="images/banner-5.jpeg">
    </div>
  </div>
</div>

修改后的CSS代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.swiper {
  width: 100%;
  height: fit-content;
  position: relative; /* 调整为relative，避免干扰页面布局 */
}
.swiper-slide {
  position: relative; /* 给幻灯片设置相对定位，让内部按钮的绝对定位基于当前幻灯片 */
}
.swiper-slide img {
  width: 100%;
  display: block; /* 消除图片底部默认间隙 */
}
/* 通用按钮基础样式 */
.slide-btn {
  position: absolute;
  z-index: 10; /* 确保按钮在图片上方 */
  border: none;
  cursor: pointer;
  font-weight: bold;
}
/* 第1张幻灯片按钮专属样式 */
.btn-1 {
  top: 350px;
  left: 850px;
  font-size: 30px;
  padding: 12px 30px;
  background: #fff;
  color: #000;
}
/* 第2张幻灯片按钮专属样式 */
.btn-2 {
  top: 280px;
  left: 200px;
  font-size: 24px;
  padding: 15px 40px;
  background: #ff4400;
  color: #fff;
  border-radius: 8px;
}

关键说明 #

• 将按钮放入对应swiper-slide内部，让按钮成为幻灯片的子元素，Swiper切换时未激活的幻灯片会被隐藏或移出视口，内部按钮自然不会显示。
• 给swiper-slide设置position: relative，让按钮的绝对定位基于当前幻灯片，而非整个页面，能精准控制每个按钮在对应幻灯片上的位置。
• 用不同类名区分按钮，分别设置位置、尺寸、样式，实现每张幻灯片按钮的差异化展示。

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