SwiperJS半图半文本轮播异常：仅图片滑动文本固定重叠

问题现象 #

实现的半图半文本Swiper轮播组件，点击导航箭头时仅图片滑动，文本区域如同固定元素保持不动；切换至第4个轮播项时，所有文本出现重叠。

故障原因 #

1. fade 效果下，非激活状态的Slide未正确隐藏，导致文本层叠加显示
2. Slide内部布局未绑定到Slide上下文，文本容器脱离了轮播的控制范围
3. Slide高度设置为 auto 导致轮播容器高度计算异常，引发布局错位

解决步骤 #

1. 修正Slide的定位与层级控制 #

给Slide添加相对定位，同时通过Swiper的激活类控制层级和可见性，确保仅当前激活的Slide内容显示：

.swiper .swiper-slide {
  position: relative;
  opacity: 0;
  z-index: 0;
}

.swiper .swiper-slide-active {
  opacity: 1;
  z-index: 1;
}

2. 统一Slide内部布局样式 #

确保每个Slide内的Flex容器占满宽度，文本容器完全隶属于当前Slide：

<SwiperSlide>
  <div className="d-flex w-100">
    <img src={img8} />
    <div className="w-50 d-flex flex-column justify-content-center p-4">
      <h2 className="text-center">{t("medical.title2")}</h2>
      <p className="text-center">{t("medical.par2")}</p>
    </div>
  </div>
</SwiperSlide>

3. 优化Swiper容器高度配置 #

启用Swiper的自动高度计算，避免容器高度异常导致的布局错位：

<Swiper
  spaceBetween={30}
  effect="fade"
  navigation={true}
  pagination={{ clickable: true }}
  autoHeight={true} <!-- 新增自动高度属性 -->
  modules={[EffectFade, Navigation, Pagination]}
  className="mySwiper"
>
<!-- 轮播项 -->
</Swiper>

最终完整CSS #

.swiper {
  width: 100%;
  min-height: 400px; /* 设置最小高度防止布局塌陷 */
}

.swiper .swiper-slide {
  position: relative;
  opacity: 0;
  z-index: 0;
  height: auto;
}

.swiper .swiper-slide-active {
  opacity: 1;
  z-index: 1;
}

.swiper-slide img {
  display: block;
  width: 50%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}

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