title: Bootstrap 4 Multi Carousel show 4 images instead of 3
body: <p>I can't figure out how to make it show 4 images instead of 3.</p>
  
  <p><a href="https://www.codeply.com/go/FrzoIEKCdH/bootstrap-4-carousel-multiple" rel="nofollow noreferrer">Based on this Code: Bootstrap 4 Multiple Item Carousel</a></p>
  
  <p>Script JS</p>
  
  <pre><code>$('#recipeCarousel').carousel({
    interval: 10000
  })
  
  $('.carousel .carousel-item').each(function(){
      var next = $(this).next();
      if (!next.length) {
      next = $(this).siblings(':first');
      }
      next.children(':first-child').clone().appendTo($(this));
  
      if (next.next().length&gt;0) {
      next.next().children(':first-child').clone().appendTo($(this));
      }
      else {
        $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
      }
  });
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.carousel-inner .carousel-item-right.active,
  .carousel-inner .carousel-item-next {
  transform: translateX(25%);
  }
  
  .carousel-inner .carousel-item-left.active, 
  .carousel-inner .carousel-item-prev {
  transform: translateX(-25%)
  }
  
  .carousel-inner .carousel-item-right,
  .carousel-inner .carousel-item-left{ 
  transform: translateX(0);
  }
  </code></pre>
  
  <p>and I've changed to this code </p>
  
  <pre><code>&lt;div class="carousel-item col-md-3"&gt;
  </code></pre>
  
  <p>instead of this original code </p>
  
  <pre><code>&lt;div class="carousel-item col-md-4"&gt;
  </code></pre>