如何使用idangero swiper在背景上使用文字然后回应？

Question

我想制作一个类似于本网站上的轮播： https://debut-demo.myshopify.com/ 单词会与轮播中的图片保持一致。 我尝试使用position: relative和position: absolute在背景上制作单词。

1。我的HTML

<div class="swiper-container">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
            <!-- Slides -->
            <div class="swiper-slide">
                <h2>title01</h2>
                <img src="../src/images/background1.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="../src/images/background2.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="../src/images/background3.jpg" alt="">
            </div>
        </div>
        <!-- If we need pagination -->
        <div class="swiper-pagination"></div>
        <!-- If we need navigation buttons -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        <!-- If we need scrollbar -->
        <div class="swiper-scrollbar"></div>
    </div>

2。我的SCSS

    .swiper-container {

    .swiper-slide {
    max-height: 700px;
    position: relative;

    img {
      -webkit-filter: brightness(.8);
      width: 100%;
    }

    h2 {
      top: 245px;
      left: 100px;
      font-size: 4.0625rem;
      z-index: 20;
      position: absolute;
    }
  }
}

enter image description here enter image description here