如何在Bootstrap 5轮播组件中显示上一张和下一张图片预览

我希望在Bootstrap 5的轮播组件中，让每张处于中央位置的图片两侧都能部分显示上一张和下一张图片（中央图左右露出相邻图的边缘）。

当前使用的代码 #

HTML代码

<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>

CSS代码

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

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

修改后的实现方案 #

先修复轮播的基础结构（添加必要的carousel-inner容器），再通过CSS调整item宽度和容器溢出规则，实现两侧露出相邻图片的效果：

修改后的HTML代码

<div class="carousel-container">
  <div id="carouselExampleRide" class="carousel slide" data-bs-ride="true">
    <!-- 轮播控制按钮 -->
    <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>
    <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 class="carousel-inner">
      <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" 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" alt="art">
      </div>
    </div>
  </div>
</div>

修改后的CSS代码

.carousel-container {
  margin: auto;
  width: 70%; /* 调整容器宽度，给两侧留出显示空间 */
  overflow: visible; /* 允许内容超出容器显示 */
}

.carousel-inner {
  justify-content: center; /* 让轮播item居中排列 */
}

.carousel-item {
  width: 80%; /* 设置item宽度小于100%，露出相邻item的部分 */
  margin: 0 10px; /* 给item添加左右间距，优化显示效果 */
  opacity: 0.5; /* 非活跃item设置半透明，突出中央图 */
  transition: all 0.3s ease;
}

.carousel-item.active {
  opacity: 1; /* 活跃item完全不透明 */
  z-index: 1; /* 确保中央图在最上层 */
}

.carousel-control-prev, .carousel-control-next {
  width: 5%; /* 缩小控制按钮宽度 */
  top: 50%;
  transform: translateY(-50%);
}

效果说明 #

• 容器设置overflow: visible，让超出容器的相邻图片能显示出来
• 调整carousel-item的宽度为80%，并添加左右间距，使得相邻item能从中央图两侧露出
• 给非活跃item设置半透明，突出当前显示的中央图片
• 优化控制按钮的位置，确保操作区域合理

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