如何使用ngx-useful-swiper（swiper.js）配合*ngFor在轮播图内正确放置各图标题

核心错误定位 #

当前实现存在两个导致重叠的关键问题：

1. 违背Swiper组件的DOM结构规范：Swiper要求带.swiper-slide类的元素才是独立轮播项，之前直接把.swiper-slide类加在<img>标签上，把<h3>作为平级元素放在img旁边，每个轮播项没有独立的相对定位父容器。绝对定位的h3无法匹配归属的轮播项，最终全部堆叠到最近的定位父节点上。
2. 样式选择器完全无效：ng-container是Angular的逻辑占位标签，不会在真实DOM中渲染节点，之前写的.ng-container { position: relative; }根本匹配不到任何元素，没有起到父容器的作用。

落地修改步骤 #

1. 重构模板结构 #

把每张图和对应的标题包裹在同一个独立的.swiper-slide容器内，不再把.swiper-slide类直接挂在img上：

<section>
  <swiper [config]="config">
    <div class="swiper-wrapper">
      <!-- 每个轮播项为独立的swiper-slide容器 -->
      <div class="swiper-slide" *ngFor="let img of images">
        <img class="slide-img" [src]="img.src" [alt]="img.alt" />
        <h3 class="slide-title">{{ img.title }}</h3>
      </div>
    </div>
    <!-- 原有分页、导航结构保留不变 -->
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </swiper>
</section>

2. 修正样式逻辑 #

• 给每个.swiper-slide加相对定位，作为内部标题的定位参照
• 删掉无效的.ng-container选择器
• 调整图片样式让其撑满slide容器、保持裁切比例
• 将标题的定位范围约束在单个slide内部
  修改后的SCSS代码：

section {
  margin: 0.6rem 2rem 0.8rem 2rem;

  swiper {
    height: 190px;
    width: 100%;

    // 独立轮播项作为内部元素的定位基准
    .swiper-slide {
      position: relative;

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

      // 标题固定在当前slide内部，不会跨容器重叠
      .slide-title {
        position: absolute;
        top: 8px;
        left: 16px;
        margin: 0;
        color: #fff;
        font-size: 24px;
        font-weight: 500;
        line-height: 36px;
        max-width: 180px;
        text-shadow: 1px 1px 2px #000;
      }
    }
  }
}

避坑提醒 #

• 删掉原代码中最外层全局生效的h3 { position: absolute; }规则，避免覆盖slide内部的标题定位逻辑
• 不要尝试给ng-container绑定样式，它不会生成真实DOM节点，所有样式规则要绑定到实际渲染的HTML元素上
• Swiper会自动计算每个.swiper-slide的宽度和布局，不要在slide内部嵌套多余的无意义容器，避免出现布局错位
• 现有组件TS代码中的轮播配置、图片数据逻辑无错误，无需调整

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