title: Bootstrap 5 carousel with multiple sliders
body: <p>i'm trying to make bootstrap 5 carousel with multi items. but in my code i could display 3 items at a time. how can make 6 items at a time. I try to change the value in JS code  but there it doesn't work. Please correct my following so it could display 6 items at a time and can be vary later. here is complete code.</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3&quot; crossorigin=&quot;anonymous&quot;&gt;
    &lt;style type=&quot;text/css&quot;&gt;
    body{
      background: #f7f7;
    }
     @media (max-width: 767px) {
      .carousel-inner .carousel-item &gt; div {
          display: none;
      }
      .carousel-inner .carousel-item &gt; div:first-child {
          display: block;
      }
  }
  
  .carousel-inner .carousel-item.active,
  .carousel-inner .carousel-item-next,
  .carousel-inner .carousel-item-prev {
      display: flex;
  }
  
  /* medium and up screens */
  @media (min-width: 768px) {
      
      .carousel-inner .carousel-item-end.active,
      .carousel-inner .carousel-item-next {
        transform: translateX(25%);
      }
      
      .carousel-inner .carousel-item-start.active, 
      .carousel-inner .carousel-item-prev {
        transform: translateX(-25%);
      }
  }
  
  .carousel-inner .carousel-item-end,
  .carousel-inner .carousel-item-start { 
    transform: translateX(0);
  }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class=&quot;container-fluid text-center my-3&quot;&gt;
      &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;row mx-auto my-auto justify-content-center&quot;&gt;
          &lt;div id=&quot;recipeCarousel&quot; class=&quot;carousel slide&quot; data-bs-ride=&quot;carousel&quot;&gt;
              &lt;div class=&quot;carousel-inner&quot; role=&quot;listbox&quot;&gt;
                  &lt;div class=&quot;carousel-item active&quot;&gt;
                      &lt;div class=&quot;col-md-4&quot;&gt;
                          &lt;div class=&quot;card&quot;&gt;
                              &lt;div class=&quot;card-img&quot;&gt;
                                  &lt;img src=&quot;img/1.jpg&quot; class=&quot;img-fluid&quot;&gt;
                              &lt;/div&gt;
                              &lt;div class=&quot;card-img-overlay&quot;&gt;Slide 1&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;carousel-item&quot;&gt;
                      &lt;div class=&quot;col-md-4&quot;&gt;
                          &lt;div class=&quot;card&quot;&gt;
                              &lt;div class=&quot;card-img&quot;&gt;
                                  &lt;img src=&quot;img/2.jpg&quot; class=&quot;img-fluid&quot;&gt;
                              &lt;/div&gt;
                              &lt;div class=&quot;card-img-overlay&quot;&gt;Slide 2&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;carousel-item&quot;&gt;
                      &lt;div class=&quot;col-md-4&quot;&gt;
                          &lt;div class=&quot;card&quot;&gt;
                              &lt;div class=&quot;card-img&quot;&gt;
                                  &lt;img src=&quot;img/3.jpg&quot; class=&quot;img-fluid&quot;&gt;
                              &lt;/div&gt;
                              &lt;div class=&quot;card-img-overlay&quot;&gt;Slide 3&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;carousel-item&quot;&gt;
                      &lt;div class=&quot;col-md-4&quot;&gt;
                          &lt;div class=&quot;card&quot;&gt;
                              &lt;div class=&quot;card-img&quot;&gt;
                                  &lt;img src=&quot;img/4.jpg&quot; class=&quot;img-fluid&quot;&gt;
                              &lt;/div&gt;
                              &lt;div class=&quot;card-img-overlay&quot;&gt;Slide 4&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;carousel-item&quot;&gt;
                      &lt;div class=&quot;col-md-4&quot;&gt;
                          &lt;div class=&quot;card&quot;&gt;
                              &lt;div class=&quot;card-img&quot;&gt;
                                  &lt;img src=&quot;img/4.jpg&quot; class=&quot;img-fluid&quot;&gt;
                              &lt;/div&gt;
                              &lt;div class=&quot;card-img-overlay&quot;&gt;Slide 4&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;a class=&quot;carousel-control-prev bg-transparent w-aut&quot; href=&quot;#recipeCarousel&quot; role=&quot;button&quot; data-bs-slide=&quot;prev&quot;&gt;
                  &lt;span class=&quot;carousel-control-prev-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
              &lt;/a&gt;
              &lt;a class=&quot;carousel-control-next bg-transparent w-aut&quot; href=&quot;#recipeCarousel&quot; role=&quot;button&quot; data-bs-slide=&quot;next&quot;&gt;
                  &lt;span class=&quot;carousel-control-next-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      
  &lt;/div&gt;
  
  
  &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://code.jquery.com/jquery-3.6.0.min.js&quot; integrity=&quot;sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
   let items = document.querySelectorAll('.carousel .carousel-item')
  
  items.forEach((el) =&gt; {
      const minPerSlide = 3
      let next = el.nextElementSibling
      for (var i=1; i&lt;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
      }
  });
  
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>