如何在 Bootstrap 5 的轮播界面中显示上一张和下一张图片的预览-解网

问：

我希望轮播中的上一张和下一张图片部分出现在每个中心图像中，例如这

这是代码。

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

谢谢

HTML CSS twitter-bootstrap-3 轮播引导-5

<div class="carousel-container">
  <div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
    <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>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" 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="#carouselExample" 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: 80%;
}

.carousel-item {
  position: relative;
}

.carousel-item.active img {
  width: 100%;
}

.carousel-item:not(.active) img {
  width: 80%;
  position: absolute;
  top: 0;
  left: 10%;
  opacity: 0.5;
  transition: all 0.3s ease;
}

.carousel-item:not(.active) img:hover {
  width: 90%;
  left: 5%;
  opacity: 0.8;
  cursor: pointer;
}

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

How to show previews of previous and next images in carousel in Bootstrap 5

评论

评论