如何使用它:

1.在文档中加载必要的jQuery库和Bootstrap 5框架。

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>

2.垂直转盘所需的HTML结构。

<div class="carousel-container justify-content-center">
  <!-- data-bs-interval: the amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle -->
  <!-- data-bs wrap: whether the carousel should cycle continuously (i.e go from first to last and vice-versa) -->
  <div id="vertical-carousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="false"
    data-bs-wrap="false">
    <!-- Carousel slide indicators -->
    <ol class="carousel-indicators">
      <li data-bs-target="#vertical-carousel" data-bs-slide-to="0" class="active"></li>
      <li data-bs-target="#vertical-carousel" data-bs-slide-to="1"></li>
      <li data-bs-target="#vertical-carousel" data-bs-slide-to="2"></li>
      <li data-bs-target="#vertical-carousel" data-bs-slide-to="3"></li>
    </ol>
    <div class="carousel-inner">
      <!-- Carousel item represents each slide -->
      <div class="carousel-item active" style="background-image:url(1.jpg);">
        <div class="container">
          <div class="row align-items-center" style="height: 100%">
            <h1 class="display-3 text-center text-light">
              Bootstrap 5 Vertical Carousel
            </h1>
          </div>
        </div>
      </div>
      <div class="carousel-item" style="background-image:url(2.jpg);">
      </div>
      <div class="carousel-item" style="background-image:url(3.jpg);">
      </div>
      <div class="carousel-item" style="background-image:url(4.jpg);">
      </div>
    </div>
  </div>
  <!-- Carousel buttons -->
  <button class="unclickable carousel-control-prev" type="button" data-bs-target="#vertical-carousel" data-bs-slide="prev">
    <span class="clickable carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="unclickable carousel-control-next" type="button" data-bs-target="#vertical-carousel" data-bs-slide="next">
    <span class="clickable carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

3.在jQuery之后加载垂直旋转木马的脚本。

<script src="./index.js"></script>

4.用于垂直旋转木马的其他CSS样式。

.carousel {
  border-radius: 50px 50px 50px 50px;
  overflow: hidden;
}
 
.carousel-inner, .carousel, .carousel-item, .carousel-container {
  height: 100%;
  width: 100%;
  background-position: center center;
  background-size: cover;
}
 
.carousel-item-prev:not(.carousel-item-end), .active.carousel-item-start {
  transform: translate3d(0, -100%, 0);
  -webkit-transform: translate3d(0, -100%, 0);
  -moz-transform: translate3d(0, -100%, 0);
  -ms-transform: translate3d(0, -100%, 0);
  -o-transform: translate3d(0, -100%, 0);
}
 
.carousel-item-next:not(.carousel-item-start), .active.carousel-item-end {
  transform: translate3d(0, 100%, 0);
  -webkit-transform: translate3d(0, 100%, 0);
  -ms-transform: translate3d(0, 100%, 0);
  -moz-transform: translate3d(0, 100%, 0);
  -o-transform: translate3d(0, 100%, 0);
}
 
.carousel-indicators {
  top: 0;
  margin: auto;
  height: 20px;
  right: 10px;
  left: auto;
  display: block;
}
 
.carousel-indicators [data-bs-target] {
  background: none;
  border: 2px solid white;
  border-radius: 12px;
  width: 12px;
  height: 12px;
  margin-bottom: 5px;
}
 
.carousel-indicators li.active {
  background: white;
}
 
.carousel-control-next-icon, .carousel-control-prev-icon {
  width: 4rem;
  height: 4rem;
  position: fixed;
  top: 95%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  z-index: -1;
}
 
.carousel-control-prev-icon {
  top: 5%;
}
 
.unclickable {
  pointer-events: none;
}
 
.clickable {
  pointer-events: all;
}

更新日志：

2022-02-20

• JS

预览截图

带Bootstrap程序 触摸式垂直旋转木马5