如何实现轮播图切换时显示相邻图片的部分内容

我正在复刻目标网站页脚上方的轮播图，当前遇到的问题：

• 切换幻灯片时，无法在当前图片的左侧和右侧显示相邻图片的部分内容。

在线沙箱代码链接：https://235v3c.csb.app/

我已尝试一些解决方案并添加到代码中，以下是目前编写的代码：

<div class="container-fluid">
      <div class="row carousel slide container h-25 my-5 overflow-hidden" data-bs-ride="carousel" id="zb-carousel">
        <div class="col-12 text-center carousel-inner row justify-content-around">
          <!-- carousel items section -->
          <div class="col-lg-4 carousel-item active">
            <img alt="..." class="img-fluid d-block container px-1 rounded-4" src="https://marvel-b1-cdn.bc0a.com/f00000000271831/www.zarbees.com/static/458456bbccdf98784747d0e20576ee6b/5fd6b/OurStoryPage%24slides%24default%24image.jpg" />
            <span class="fw-bold"> 1 / 4</span>
          </div>

          <div class="col-lg-4 carousel-item"><img alt="..." class="img-fluid d-block container px-1 rounded-4" src="https://marvel-b1-cdn.bc0a.com/f00000000271831/www.zarbees.com/static/84471847ff79d9a6de0a9b2ca0cfcc16/5fd6b/OurStoryPage%24slides%249bbc3649-1bf1-4b24-a272-bc85a3be726a%24image.jpg" />
            <span class="fw-bold"> 2 / 4</span>
          </div>

          <div class="col-lg-4 carousel-item"><img alt="..." class="img-fluid d-block container px-1 rounded-4 fw-bold" src="https://marvel-b1-cdn.bc0a.com/f00000000271831/www.zarbees.com/static/fe4aa0b4fd24ab42e4ea7e741df8b790/5fd6b/OurStoryPage%24slides%24c9cd465b-44ce-4cc4-8117-32d19c585677%24image.jpg" />
            <span class="fw-bold"> 3 / 4</span>
          </div>

          <div class="col-lg-4 carousel-item"><img alt="..." class="img-fluid d-block container px-1 rounded-4 fw-bold" src="https://marvel-b1-cdn.bc0a.com/f00000000271831/www.zarbees.com/static/d6c20efa278252b4d8f7d6b8f9067b9d/bbe0c/OurStoryPage%24slides%2431406a19-a2e0-42c0-a54f-bbe0bd2c8c29%24image.jpg" />
            <span class="fw-bold"> 4 / 4</span>
          </div>

        </div>
        <!-- carousel control buttons | prev | next | -->
        <div class="d-flex flex-row-reverse">
          <button class="carousel-control-prev-icon bg-transparent border border-primary rounded-5 w-5 h-5 mx-2 position-relative end-0 ms-2" data-bs-slide="next" data-bs-target="#zb-carousel" type="button">
            <svg class="position-absolute top-50 start-50 translate-middle" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
              <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
            </svg>
          </button>
          <button class="carousel-control-next-icon bg-transparent border border-primary rounded-5 w-5 h-5 mx-2 position-relative end-0 me-2" data-bs-slide="prev" data-bs-target="#zb-carousel" type="button">
            <svg class="position-absolute top-50 start-50 translate-middle" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
              <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"/>
            </svg>
          </button>
        </div>
      </div>
    </div>


    <script type="module">
    
          const zbCarouselId = document.querySelector('#zb-carousel')
          const zbCarousel = new bootstrap.Carousel(zbCarouselId);
          const carouselSlides = document.querySelectorAll('.carousel.carousel-item');
    
          slides.forEach((el) => {
              // number of slides per carousel-item
              const minPerSlide = carouselSlides.length;
              let next = el.nextElementSibling;
              for (let i = 1; i < minPerSlide; i++) {
                  if (!next) {
                      // wrap carousel by using first child
                      next = carouselSlides[0];
                  }
                  let cloneChild = next.cloneNode(true);
                  el.appendChild(cloneChild.children[0]);
                  next = next.nextElementSibling;
              }
          })
    
        </script>


    <style>
    
          .carousel-inner:before {
              position:absolute;
              top:0;
              bottom: 0;
              right: 100%;
              left: 0;
              content:"";
              /* display:block; */
              background-color: #fff;
              z-index: 2;
          }
          .carousel-inner:after {
              position:absolute;
              top:0;
              bottom:0;
              right: 0;
              left: 100%;
              content:"";
              /* display:block; */
              background-color:#fff;
              z-index: 2;
          }
        </style>

内容的提问来源于stack exchange，提问作者Joel Guerreiro Borghi Filho