我有一个Bootstrap轮播（标准功能——水平切换）。我一直在尝试在水平切换控件之外再增加垂直切换控件。到目前为止还没有取得任何进展，希望有人能给我一点提示，看看如何在同一个轮播上同时容纳这两种滑动控件。下面是我正在使用的代码：

.carousel-item {
  transition: transform 1s ease-in-out !important;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: hidden !important;
}

.carousel-item.active.carousel-item-start {
  transform: translateY(-100%) !important;
}

.carousel-item.carousel-item-next {
  transform: translateY(100%) !important;
}

.carousel-item.carousel-item-next.carousel-item-start {
  transform: translateY(0%) !important;
}

.carousel-item.active.carousel-item-end {
  transform: translateY(100%) !important;
}

.carousel-item.carousel-item-prev {
  transform: translateY(-100%) !important;
}

.carousel-item.carousel-item-prev.carousel-item-end {
  transform: translateY(0%) !important;
}


@media (max-width: 767px) {

  .carousel,
  .carousel-inner,
  .carousel-item {
    height: 100vh;
  }

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

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/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="">
    </div>

    <div class="carousel-item">
      <img src="https://picsum.photos/800/600?2" class="d-block w-100" alt="">
    </div>

    <div class="carousel-item">
      <img src="https://picsum.photos/800/600?3" class="d-block w-100" alt="">
    </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>

解决方案

正如 @SaandeepBaansod 所建议，单靠CSS无法实现这一点。然而，在添加了CSS之后，正如你所做的那样，我们还需要添加垂直按钮的HTML、一个自定义的JavaScript，然后就能够工作。下面给出实现：

document.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll(".carousel").forEach(el => {
    const carousel = bootstrap.Carousel.getOrCreateInstance(el);

    el.querySelectorAll("[data-axis='vertical']").forEach(btn => {
      btn.addEventListener("click", event => {
        event.preventDefault();
        event.stopPropagation();

        el.classList.remove("vertical-next", "vertical-prev");

        if (btn.dataset.slide === "next") {
          el.classList.add("carousel-vertical", "vertical-next");
          carousel.next();
        } else {
          el.classList.add("carousel-vertical", "vertical-prev");
          carousel.prev();
        }
      });
    });

    el.addEventListener("slid.bs.carousel", () => {
      el.classList.remove(
        "carousel-vertical",
        "vertical-next",
        "vertical-prev"
      );
    });
  });
});

.carousel-item {
  transition: transform 1s ease-in-out !important;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: hidden !important;
}

/* NEXT: current goes UP, next comes from BELOW */
.carousel-vertical.vertical-next .carousel-item.active.carousel-item-start {
  transform: translateY(-100%) !important;
}

.carousel-vertical.vertical-next .carousel-item.carousel-item-next {
  transform: translateY(100%) !important;
}

.carousel-vertical.vertical-next .carousel-item.carousel-item-next.carousel-item-start {
  transform: translateY(0) !important;
}


/* PREV: current goes DOWN, previous comes from ABOVE */
.carousel-vertical.vertical-prev .carousel-item.active.carousel-item-end {
  transform: translateY(100%) !important;
}

.carousel-vertical.vertical-prev .carousel-item.carousel-item-prev {
  transform: translateY(-100%) !important;
}

.carousel-vertical.vertical-prev .carousel-item.carousel-item-prev.carousel-item-end {
  transform: translateY(0) !important;
}

/*CSS for the new buttons */
button.carousel-control-prev.vertical {
  bottom: initial !important;
  left: calc(50% - 16px);
  transform: rotate(90deg);
}

button.carousel-control-next.vertical {
  top: initial !important;
  left: calc(50% - 16px);
  transform: rotate(90deg);
}

@media (max-width: 767px) {

  .carousel,
  .carousel-inner,
  .carousel-item {
    height: 100vh;
  }

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

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/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="">
    </div>

    <div class="carousel-item">
      <img src="https://picsum.photos/800/600?2" class="d-block w-100" alt="">
    </div>

    <div class="carousel-item">
      <img src="https://picsum.photos/800/600?3" class="d-block w-100" alt="">
    </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>
  <!-- new sets of controllers from here-->
  <button class="carousel-control-prev vertical" type="button" data-bs-target="#carouselExample" data-axis="vertical" data-slide="ptev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
  <button class="carousel-control-next vertical" type="button" data-bs-target="#carouselExample" data-axis="vertical" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
</div>