Carousel Container 具有相同的值

Question

我有两个文件：Index.html 和 Script.js

而不是单独滑动的标题 1、标题 2、标题 3 的输出。我在一个容器中输出了所有 title1、title2、title3，它们以相同的内容滑动。

Index.html:

        <div class="container">
          <div class="px-3 mb-5">
            <h3 class="fw-bold></h3>
          </div>

          <div class="container px-5 px-md-3" data-aos="zoom-in">
            <div
              class="testimonials-slider swiper py-2"
              data-aos="fade-up"
              data-aos-delay="100"
            >
              <div class="swiper-wrapper featured">
                <div class="swiper-slide mx-2"></div>
              </div>
            </div>
          </div>

          <div class="p-3 text-end">
            <a href="">See more</a>
          </div>
        </div>

Script.js

  function display(item) {
    const itemContainer= $(".featured .swiper-slide");
      const carouselContainer = `
        <div class="carousel-container border rounded">
            <div class="row mx-3 my-4">
              <div class="col-md-6">
                <div class="carousel-header-item">
                  <h3 class="fs-1 fw-bold">Title 1</h3>
              </div>
            </div>
          </div>
         </div>

          <div class="carousel-container border rounded">
            <div class="row mx-3 my-4">
              <div class="col-md-6">
                <div class="carousel-header-item">
                  <h3 class="fs-1 fw-bold">Title 2</h3>
              </div>
            </div>
          </div>
         </div>

         <div class="carousel-container border rounded">
            <div class="row mx-3 my-4">
              <div class="col-md-6">
                <div class="carousel-header-item">
                  <h3 class="fs-1 fw-bold">Title 3</h3>
              </div>
            </div>
          </div>
         </div>
        `;
      itemContainer.html(carouselContainer);
  }

我该如何解决这个问题？