Bootstrap 5: слайдер/карусель продуктов

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

items.forEach((el) => {
  const minPerSlide = 5
  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-item .col {
  padding: 0 5px;
}

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

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
  display: flex !important;
}


/* medium and up screens */

@media (min-width: 768px) {
  .carousel-inner .carousel-item-end.active,
  .carousel-inner .carousel-item-next {
    transform: translateX(20%) !important;
  }
  .carousel-inner .carousel-item-start.active,
  .carousel-inner .carousel-item-prev {
    transform: translateX(-20%) !important;
  }
  /*  half slides CSS */
  .carousel-inner:before {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 85%;
    left: 0;
    content: "";
    display: block;
    background-color: #fff;
    z-index: 2;
  }
  .carousel-inner:after {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 85%;
    content: "";
    display: block;
    background-color: #fff;
    z-index: 2;
  }
  .carousel-control-prev {
    left: 12% !important;
  }
  .carousel-control-next {
    right: 12% !important;
  }
}

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

<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin = "anonymous">
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin = "anonymous"></script>

<div class = "container">
  <div class = "row justify-content-center">
    <div id = "carouselExampleControls" class = "carousel carousel-dark slide">
      <div class = "carousel-inner" role = "listbox">
        <div class = "carousel-item active">
          <div class = "col">
            <div class = "card">
              <img src = "https://via.placeholder.com/700x500.png/CB997E/333333?text=1" class = "card-img-top" alt = "...">
              <div class = "card-body">
                <h5 class = "card-title">Card title</h5>
                <p class = "card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
              </div>
            </div>
          </div>
        </div>
        <div class = "carousel-item">
          <div class = "col">
            <div class = "card">
              <img src = "https://via.placeholder.com/700x500.png/DDBEA9/333333?text=2" class = "card-img-top" alt = "...">
              <div class = "card-body">
                <h5 class = "card-title">Card title</h5>
                <p class = "card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
              </div>
            </div>

          </div>
        </div>
        <div class = "carousel-item">
          <div class = "col">
            <div class = "card">
              <img src = "https://via.placeholder.com/700x500.png/FFE8D6/333333?text=3" class = "card-img-top" alt = "...">
              <div class = "card-body">
                <h5 class = "card-title">Card title</h5>
                <p class = "card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
              </div>
            </div>
          </div>
        </div>
        <div class = "carousel-item">
          <div class = "col">
            <div class = "card">
              <img src = "https://via.placeholder.com/700x500.png/B7B7A4/333333?text=4" class = "card-img-top" alt = "...">
              <div class = "card-body">
                <h5 class = "card-title">Card title</h5>
                <p class = "card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
              </div>
            </div>
          </div>
        </div>
        <div class = "carousel-item">
          <div class = "col">
            <div class = "card">
              <img src = "https://via.placeholder.com/700x500.png/A5A58D/333333?text=5" class = "card-img-top" alt = "...">
              <div class = "card-body">
                <h5 class = "card-title">Card title</h5>
                <p class = "card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
              </div>
            </div>
          </div>
        </div>
        <div class = "carousel-item">
          <div class = "col">
            <div class = "card">
              <img src = "https://via.placeholder.com/700x500.png/6B705C/eeeeee?text=6" class = "card-img-top" alt = "...">
              <div class = "card-body">
                <h5 class = "card-title">Card title</h5>
                <p class = "card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <a class = "carousel-control-prev bg-transparent w-aut" href = "#carouselExampleControls" role = "button" data-bs-slide = "prev">
        <span class = "carousel-control-prev-icon" aria-hidden = "true"></span>
      </a>
      <a class = "carousel-control-next bg-transparent w-aut" href = "#carouselExampleControls" role = "button" data-bs-slide = "next">
        <span class = "carousel-control-next-icon" aria-hidden = "true"></span>
      </a>
    </div>
  </div>
</div>