Bootstrap 5多轮播项重叠：激活轮播项大于前后项实现方案

1. 修改HTML结构 #

给轮播容器添加自定义标识类，同时确保轮播支持循环切换，可选添加控制按钮方便手动切换：

<div id="carouselMultiView" class="carousel slide carousel-multi-view mt-5" data-bs-ride="carousel" data-bs-wrap="true" data-bs-interval="3000">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100 rounded" src="<?php echo IMAGES; ?>/girl-player.jpg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100 rounded" src="<?php echo IMAGES; ?>/pixel-player.jpg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100 rounded" src="<?php echo IMAGES; ?>/pixel-player.jpg" alt="Third slide">
    </div>
  </div>
  <!-- 手动控制按钮（可选） -->
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselMultiView" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">上一张</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselMultiView" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">下一张</span>
  </button>
</div>

2. 添加自定义CSS样式 #

通过CSS调整布局，实现激活项放大、前后项缩小重叠的视觉效果：

/* 多视图轮播基础样式 */
.carousel-multi-view {
  overflow: visible; /* 允许前后项超出容器显示 */
  max-width: 800px; /* 可根据需求调整容器最大宽度 */
  margin: 0 auto;
}

.carousel-multi-view .carousel-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px; /* 适配图片高度 */
}

/* 默认轮播项样式 */
.carousel-multi-view .carousel-item {
  flex: 0 0 60%;
  opacity: 0.6;
  transform: scale(0.85);
  transition: all 0.5s ease;
  position: relative;
  z-index: 1;
}

/* 激活项样式：放大、居中、最上层 */
.carousel-multi-view .carousel-item.active {
  flex: 0 0 80%;
  opacity: 1;
  transform: scale(1);
  z-index: 10;
}

/* 前后项定位：缩小后放在激活项两侧 */
.carousel-multi-view .carousel-item.prev,
.carousel-multi-view .carousel-item.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scale(0.85);
  z-index: 5;
}

.carousel-multi-view .carousel-item.prev {
  left: 10%;
}

.carousel-multi-view .carousel-item.next {
  right: 10%;
}

3. 补充JavaScript逻辑 #

Bootstrap默认轮播不会自动标记前后项，通过事件监听动态添加类名，确保切换时前后项位置正确：

const carousel = new bootstrap.Carousel('#carouselMultiView', {
  interval: 3000,
  wrap: true
});

// 轮播切换前更新前后项类名
carousel._element.addEventListener('slide.bs.carousel', function (e) {
  // 清除所有prev/next类
  document.querySelectorAll('.carousel-item').forEach(item => {
    item.classList.remove('prev', 'next');
  });
  
  // 根据切换方向标记前后项
  if (e.from > e.to) {
    document.querySelectorAll('.carousel-item')[e.from].classList.add('next');
  } else {
    document.querySelectorAll('.carousel-item')[e.from].classList.add('prev');
  }
});

// 初始化时标记第一个前后项
document.querySelectorAll('.carousel-item')[1].classList.add('next');

效果说明 #

• 激活轮播项居中显示，尺寸更大、完全不透明，处于视觉最上层
• 前后轮播项缩小且半透明，分别位于激活项左右两侧并形成重叠效果
• 切换过程带有平滑过渡动画，提升交互体验

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