一个jQuery脚本，用于扩展Bootstrap 5旋转木马组件，该组件允许每个视图有多个项目。

这个旋转木马帮助开发人员用吸引人的过渡和效果来展示产品、新闻、项目、文章等多种元素。

我希望你喜欢这个旋转木马，并发现它很有用！请随意修改并使用它

如何使用它:

1.在文档中加载必要的jQuery库、Bootstrap 5框架和Font Awesome Iconic Font（可选）。

<!-- jQuery -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>

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

<!-- Font Awesome -->
<link rel="stylesheet" href="/path/to/font-awesome/all.min.css" />

2.用于多项目转盘的HTML结构。

<div class="container" id="featureContainer">
  <div class="row mx-auto my-auto justify-content-center">
    <div id="featureCarousel" class="carousel slide" data-bs-ride="carousel">
      <!-- Carousel Title OPTIONAL -->
      <h2 class="font-weight-light float-start">Carousel Title</h2>
      <!-- Prev & Next Buttons -->
      <div class="float-end pe-md-4">
        <a class="indicator" href="#featureCarousel" role="button" data-bs-slide="prev">
          <span class="fas fa-chevron-left" aria-hidden="true"></span>
        </a> &nbsp;&nbsp;
        <a class="w-aut indicator" href="#featureCarousel" role="button" data-bs-slide="next">
          <span class="fas fa-chevron-right" aria-hidden="true"></span>
        </a>
      </div>
      <!-- Carousel Items -->
      <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
          <div class="col-md-3">
            <div class="card">
              <div class="card-img">
                <img src="https://source.unsplash.com/JTkibpa_Xv4/450x650" class="img-fluid">
              </div>
              <div class="card-img-overlays">Slide 1</div>
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="col-md-3">
            <div class="card">
              <div class="card-img">
                <img src="https://source.unsplash.com/m-eNBfYYrbA/450x650" class="img-fluid">
              </div>
              <div class="card-img-overlays">Slide 2</div>
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="col-md-3">
            <div class="card">
              <div class="card-img">
                <img src="https://source.unsplash.com/W2XfQIptWYs/450x650" class="img-fluid">
              </div>
              <div class="card-img-overlays">Slide 3</div>
            </div>
          </div>
        </div>
        ... more items here ...
      </div>
    </div>
  </div>
</div>

3.转盘的附加CSS样式。

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 768px) {
  .container {
      width: 750px;
  }
}

@media (min-width: 992px) {
  .container {
      width: 970px;
  }
}

@media (min-width: 1200px) {
  .container {
      width: 1170px;
  }
}

@media (max-width: 767px) {
  #featureContainer .carousel-inner .carousel-item > div {
    display: none;
  }
  #featureContainer .carousel-inner .carousel-item > div:first-child {
    display: block;
  }
}

#featureContainer .carousel-inner .carousel-item.active,
#featureContainer .carousel-inner .carousel-item-next,
#featureContainer .carousel-inner .carousel-item-prev {
  display: flex;
}

/* medium and up screens */
@media (min-width: 768px) {
  
  #featureContainer .carousel-inner .carousel-item-end.active,
  #featureContainer .carousel-inner .carousel-item-next {
    transform: translateX(25%);
  }
  
  #featureContainer .carousel-inner .carousel-item-start.active, 
  #featureContainer .carousel-inner .carousel-item-prev {
    transform: translateX(-25%);
  }

  #featureContainer .card img{
    width: 90%;
    height: 40vh;
  }

  #featureContainer .carousel-item{
    justify-content: space-between;
  }

}

@media (max-width: 767px) {
  #featureContainer .card img{
    width: 100%;
    height: 75vh;
  }
}

#featureContainer .carousel-inner .carousel-item-end,
#featureContainer .carousel-inner .carousel-item-start { 
  transform: translateX(0);
}

#featureContainer .card{
  border: 0;
}

#featureContainer .card{
  position: relative;
}

#featureContainer .card .card-img-overlays{
  position: absolute;
  bottom: 15%;
  left: 10%;
  color: #fff;
  font-weight: bolder;
}

#featureContainer a{
  text-decoration: none;
}

#featureContainer .indicator{
  border: 1px solid rgb(202, 202, 202);
  padding: 3px 6px 3px 6px;
}

#featureContainer .indicator:hover{
  background-color: blue;
  border: 1px solid blue;
  transition: 200ms;
}

#featureContainer .indicator:hover{
  color: white;
  transition: 200ms;
}

#featureContainer .indicator {
  color: lightgray;
}

#featureContainer .float-end{
  padding-top: 10px;
}

4.启用多项目转盘。

let items = document.querySelectorAll('#featureContainer .carousel .carousel-item');
items.forEach((el) => {
  const minPerSlide = 4
  let next = el.nextElementSibling
  for (var i=1; i<minPerSlide; i++) {
    if (!next) {
      // wrap carousel by using first child
      next = items[0]
    }
    let cloneChild = next.cloneNode(true)
    el.appendChild(cloneChild.children[0])
    next = next.nextElementSibling
  }
})
$(document).ready(function(){
  $('#featureCarousel').carousel({interval: false});
  $('#featureCarousel').carousel('pause');
});

预览截图

带Bootstrap 5和jQuery 多项目旋转木马