如何创建支持多方向切换的Bootstrap轮播组件

核心思路 #

通过自定义按钮触发不同切换方向，结合CSS类区分水平/垂直过渡逻辑，再用JS控制Bootstrap轮播的切换行为，实现两种切换方式共存。

步骤1：修改HTML，新增垂直切换控件 #

在原有水平控制按钮旁添加上下方向的切换按钮，用自定义属性标记切换方向：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>

<div id="carouselExample" class="carousel slide">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://picsum.photos/800/600?1" class="d-block w-100" alt="轮播图1">
    </div>
    <div class="carousel-item">
      <img src="https://picsum.photos/800/600?2" class="d-block w-100" alt="轮播图2">
    </div>
    <div class="carousel-item">
      <img src="https://picsum.photos/800/600?3" class="d-block w-100" alt="轮播图3">
    </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">上一张（水平）</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">下一张（水平）</span>
  </button>
  <!-- 垂直切换按钮 -->
  <button class="carousel-control-up" type="button" data-bs-target="#carouselExample" data-bs-slide-direction="up">
    <span class="carousel-control-prev-icon rotate-90" aria-hidden="true"></span>
    <span class="visually-hidden">上一张（垂直）</span>
  </button>
  <button class="carousel-control-down" type="button" data-bs-target="#carouselExample" data-bs-slide-direction="down">
    <span class="carousel-control-next-icon rotate-90" aria-hidden="true"></span>
    <span class="visually-hidden">下一张（垂直）</span>
  </button>
</div>

步骤2：调整CSS，区分水平/垂直过渡效果 #

新增carousel-vertical类，仅在垂直切换时应用该类，覆盖默认水平过渡逻辑：

/* 基础轮播样式 */
.carousel-item {
  transition: transform 1s ease-in-out !important;
  height: 100vh;
}

.carousel-item img {
  height: 100vh;
  object-fit: cover;
  object-position: center;
}

/* 垂直切换专属过渡 */
.carousel.carousel-vertical .carousel-item.active.carousel-item-start {
  transform: translateY(-100%) !important;
}
.carousel.carousel-vertical .carousel-item.carousel-item-next {
  transform: translateY(100%) !important;
}
.carousel.carousel-vertical .carousel-item.carousel-item-next.carousel-item-start {
  transform: translateY(0%) !important;
}
.carousel.carousel-vertical .carousel-item.active.carousel-item-end {
  transform: translateY(100%) !important;
}
.carousel.carousel-vertical .carousel-item.carousel-item-prev {
  transform: translateY(-100%) !important;
}
.carousel.carousel-vertical .carousel-item.carousel-item-prev.carousel-item-end {
  transform: translateY(0%) !important;
}

/* 垂直按钮定位与样式 */
.carousel-control-up, .carousel-control-down {
  position: absolute;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
}
.carousel-control-up {
  top: 1rem;
}
.carousel-control-down {
  bottom: 1rem;
}
.rotate-90 {
  transform: rotate(90deg);
}

/* 移动端适配 */
@media (max-width: 767px) {
  .carousel, .carousel-inner, .carousel-item {
    height: 100vh;
  }
}

步骤3：添加JS逻辑，控制切换方向 #

监听垂直按钮点击事件，动态切换轮播类并调用Bootstrap轮播的切换方法：

document.addEventListener('DOMContentLoaded', function() {
  const carouselEl = document.getElementById('carouselExample');
  const carousel = new bootstrap.Carousel(carouselEl);
  
  // 绑定垂直切换按钮事件
  document.querySelectorAll('[data-bs-slide-direction]').forEach(btn => {
    btn.addEventListener('click', function(e) {
      e.preventDefault();
      const direction = this.getAttribute('data-bs-slide-direction');
      
      // 启用垂直过渡类
      carouselEl.classList.add('carousel-vertical');
      
      // 执行对应方向切换
      direction === 'up' ? carousel.prev() : carousel.next();
      
      // 切换完成后移除垂直类，恢复水平默认状态
      const resetClass = () => {
        carouselEl.classList.remove('carousel-vertical');
        carouselEl.removeEventListener('slid.bs.carousel', resetClass);
      };
      carouselEl.addEventListener('slid.bs.carousel', resetClass);
    });
  });
});

关键说明 #

• 垂直切换时临时添加carousel-vertical类，确保过渡效果仅作用于当前切换动作，切换完成后自动移除，不影响后续水平切换。
• 垂直按钮复用默认图标并旋转90度，保持视觉一致性，也可替换为自定义图标。
• 通过slid.bs.carousel事件确保过渡动画完全结束后再恢复默认类，避免过渡冲突。

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