如何在 Bootstrap 5 的轮播中显示上一张和下一张图片的部分预览

Question

我希望轮播中的上一张和下一张图像对于每个中心图像都部分显示，例如 这个

这是代码。

    <div class="carousel-container">
      <div id="carouselExampleRide" class="carousel slide" data-bs-ride="true">
        <div>
          <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleRide" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
          </button>
        </div>
          <div class="carousel-item active">
            <img src="https://static.wixstatic.com/media/84b06e_4ae660d38c134d9f8c291148c8e378a4~mv2.png/v1/fit/w_1000%2Ch_608%2Cal_c%2Cq_80,enc_auto/file.jpg" class="d-block w-100 carousel-img-one" alt="fitness">
          </div>
          <div class="carousel-item">
            <img src="https://images-wixmp-530a50041672c69d335ba4cf.wixmp.com/templates/image/447dee40e57ab139592d58c4a61cf9b28297bb9c0b945568da9f7122e1e6fe861623238414909.jpg" class="d-block w-100" alt="fashion">
          </div>
          <div class="carousel-item">
            <img src="https://images-wixmp-530a50041672c69d335ba4cf.wixmp.com/templates/image/0ef3b30526d23fee95381bf1b179d129f82c5b30220823b9855b2776e095de701623242117925.jpg" class="d-block w-100 img-fluid" alt="art">
          </div>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleRide" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
    </div>

.carousel-container {
  margin: auto;
  width: 50%;
}

.carousel-control-prev, .carousel-control-next {
  margin: -150px !important;
}

谢谢