bootstrab自带的轮播效果实现一个渐入和渐出效果过渡时有间隙,下一张紧跟的效果

为了实现没有任何间隙、且两张图片在切换时紧跟在一起的效果，我们需要取消渐入渐出的透明度过渡，并采用图片直接滑动到下一个的效果。也就是说，当前图片在离开屏幕时，下一张图片会立即滑入屏幕。

解决方法：

• 取消透明度过渡，让图片在切换时保持可见，并直接从一侧滑入或滑出。

• 使用 translateX 实现滑动效果，确保两张图片紧跟在一起。

以下是改进后的CSS实现滑动效果，同时保证图片之间无间隙衔接:

        HTML结构:

<div id="customCarousel" class="carousel slide" data-bs-ride="carousel">
  <ol class="carousel-indicators">
    <li data-bs-target="#customCarousel" data-bs-slide-to="0" class="active"></li>
    <li data-bs-target="#customCarousel" data-bs-slide-to="1"></li>
    <li data-bs-target="#customCarousel" data-bs-slide-to="2"></li>
  </ol>

  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slide 1">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slide 2">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slide 3">
    </div>
  </div>

  <a class="carousel-control-prev" href="#customCarousel" role="button" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </a>
  <a class="carousel-control-next" href="#customCarousel" role="button" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </a>
</div>

css部分

.carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease; /* 使用滑动过渡 */
}

.carousel-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-item.active {
  position: relative; /* 当前项为相对定位，确保显示在前面 */
  transform: translateX(0); /* 当前项位置居中 */
}

.carousel-item-next {
  transform: translateX(100%); /* 下一张图片在右侧 */
}

.carousel-item-prev {
  transform: translateX(-100%); /* 上一张图片在左侧 */
}

/* 当滑动时，控制当前和下一项的位置 */
.carousel-item.active.carousel-item-start {
  transform: translateX(-100%); /* 当前图片向左滑出 */
}

.carousel-item.active.carousel-item-end {
  transform: translateX(100%); /* 当前图片向右滑出 */
}

.carousel-item-next.carousel-item-start,
.carousel-item-prev.carousel-item-end {
  transform: translateX(0); /* 下一张图片滑入居中 */
}

你想要的效果就是这么简单

最后

以上就是名字长了才好记最近收集整理的关于bootstrab自带的轮播效果实现一个渐入和渐出效果过渡时有间隙,下一张紧跟的效果的全部内容，更多相关bootstrab自带内容请搜索靠谱客的其他文章。