隐藏项目时调整轮播项目

Question

我的页面上有这个旋转木马：

$(function() {

  let items = document.querySelectorAll('.carousel .carousel-item')

  items.forEach((el) => {
    const minPerSlide = 6
    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;
    }
  });
});

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
  display: flex;
}
.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
  transform: translateX(0);
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: 50% / 100% 100% no-repeat;
}

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='black' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='black' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
}

.carousel-inner .carousel-item {
  margin-right: inherit;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<div id="legendCarousel2" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="false" style="width:100%; margin:10px;">
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <div class="card carouselLegend">
        <span>Test 1</span>
      </div>
      <div class="card carouselLegend">
        <span>Test 2</span>
      </div>
      <div class="card carouselLegend">
        <span>Test 3</span>
      </div>
      <div class="card carouselLegend">
        <span>Test 4</span>
      </div>
      <div class="card carouselLegend">
        <span>Test 5</span>
      </div>
      <div class="card carouselLegend">
        <span>Test 6</span>
      </div>
    </div>
    <div class="carousel-item">
      <div class="card carouselLegend">
        <span>Test 7</span>
      </div>
      <div class="card carouselLegend">
        <span>Test 8</span>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev w-aut" href="#legendCarousel2" role="button" data-bs-slide="prev" style=" width: 12px;">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  </a>
  <a class="carousel-control-next bg-transparent w-aut" href="#legendCarousel2" role="button" data-bs-slide="next" style=" width: 12px;">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
  </a>
</div>
</div>

</div>

我想做的是，当我通过单击按钮隐藏一个时，轮播项目将根据我拥有的项目数量进行调整。这就是我隐藏项目的方式：

$('img[src*="legend - Comparison 2.svg"]').parent().parent().parent().css('display', 'none');

我从其中一个问题中得到了这段代码，但它确实创建了一个无限循环的轮播，我不想要那个。