title: Bootstrap carousel animations glitching
body: <p>I have a carousel that displays <code>3 items at a time</code> and <code>advances by one</code>. </p>
  
  <p>When I click the next button the items change but it seems that the 2nd and 3rd item disappears, the first item plays the animation to left and then they appear (it's not smooth I would like them all to play the animation/translate). Also when the 6th item (6th card) is leftmost there is card 7 on the middle but no card on the rightmost (should be card 1), similar when the leftmost card is 7, there are 2 gaps. </p>
  
  <p>I'm new to bootstrap, but I need to do this for <code>school</code>. I'm pretty sure I'm missing some CSS, I copied code from <a href="https://codepen.io/mandelakibiriti/pen/xQXyKQ" rel="nofollow noreferrer">https://codepen.io/mandelakibiriti/pen/xQXyKQ</a> but just pasting everything didn't work so I made some changes to the CSS.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $("#myCarousel").on("slide.bs.carousel", function(e) {
      var $e = $(e.relatedTarget);
      var idx = $e.index();
      var itemsPerSlide = 3;
      var totalItems = $(".carousel-item").length;
  
      if (idx &gt;= totalItems - (itemsPerSlide - 1)) {
        var it = itemsPerSlide - (totalItems - idx);
        for (var i = 0; i &lt; it; i++) {
          // append slides to end
          if (e.direction == "left") {
            $(".carousel-item")
              .eq(i)
              .appendTo(".carousel-inner");
          } else {
            $(".carousel-item")
              .eq(0)
              .appendTo($(this).find(".carousel-inner"));
          }
        }
      }
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.carousel-inner .active,
  .carousel-inner .active+.carousel-item,
  .carousel-inner .active+.carousel-item+.carousel-item {
    display: block;
  }
  
  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)+.carousel-item,
  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)+.carousel-item+.carousel-item {
    transition: none;
    margin-right: initial;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"&gt;
  
  &lt;div class="container-fluid"&gt;
    &lt;h1 class="text-center mb-3"&gt;Bootstrap Multi-Card Carousel&lt;/h1&gt;
    &lt;div id="myCarousel" class="carousel slide" data-ride="carousel"&gt;
      &lt;div class="carousel-inner row w-100 mx-auto"&gt;
        &lt;div class="carousel-item col-md-4 active"&gt;
          &lt;div class="card"&gt;
            &lt;img class="card-img-top img-fluid" src="http://placehold.it/800x600/f44242/fff" alt="Card image cap"&gt;
            &lt;div class="card-body"&gt;
              &lt;h4 class="card-title"&gt;Card 1&lt;/h4&gt;
              &lt;p class="card-text"&gt;This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.&lt;/p&gt;
              &lt;p class="card-text"&gt;&lt;small class="text-muted"&gt;Last updated 3 mins ago&lt;/small&gt;&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="carousel-item col-md-4"&gt;
          &lt;div class="card"&gt;
            &lt;img class="card-img-top img-fluid" src="http://placehold.it/800x600/418cf4/fff" alt="Card image cap"&gt;
            &lt;div class="card-body"&gt;
              &lt;h4 class="card-title"&gt;Card 2&lt;/h4&gt;
              &lt;p class="card-text"&gt;This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.&lt;/p&gt;
              &lt;p class="card-text"&gt;&lt;small class="text-muted"&gt;Last updated 3 mins ago&lt;/small&gt;&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="carousel-item col-md-4"&gt;
          &lt;div class="card"&gt;
            &lt;img class="card-img-top img-fluid" src="http://placehold.it/800x600/3ed846/fff" alt="Card image cap"&gt;
            &lt;div class="card-body"&gt;
              &lt;h4 class="card-title"&gt;Card 3&lt;/h4&gt;
              &lt;p class="card-text"&gt;This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.&lt;/p&gt;
              &lt;p class="card-text"&gt;&lt;small class="text-muted"&gt;Last updated 3 mins ago&lt;/small&gt;&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="carousel-item col-md-4"&gt;
          &lt;div class="card"&gt;
            &lt;img class="card-img-top img-fluid" src="http://placehold.it/800x600/42ebf4/fff" alt="Card image cap"&gt;
            &lt;div class="card-body"&gt;
              &lt;h4 class="card-title"&gt;Card 4&lt;/h4&gt;
              &lt;p class="card-text"&gt;This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.&lt;/p&gt;
              &lt;p class="card-text"&gt;&lt;small class="text-muted"&gt;Last updated 3 mins ago&lt;/small&gt;&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="carousel-item col-md-4"&gt;
          &lt;div class="card"&gt;
            &lt;img class="card-img-top img-fluid" src="http://placehold.it/800x600/f49b41/fff" alt="Card image cap"&gt;
            &lt;div class="card-body"&gt;
              &lt;h4 class="card-title"&gt;Card 5&lt;/h4&gt;
              &lt;p class="card-text"&gt;This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.&lt;/p&gt;
              &lt;p class="card-text"&gt;&lt;small class="text-muted"&gt;Last updated 3 mins ago&lt;/small&gt;&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="carousel-item col-md-4"&gt;
          &lt;div class="card"&gt;
            &lt;img class="card-img-top img-fluid" src="http://placehold.it/800x600/f4f141/fff" alt="Card image cap"&gt;
            &lt;div class="card-body"&gt;
              &lt;h4 class="card-title"&gt;Card 6&lt;/h4&gt;
              &lt;p class="card-text"&gt;This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.&lt;/p&gt;
              &lt;p class="card-text"&gt;&lt;small class="text-muted"&gt;Last updated 3 mins ago&lt;/small&gt;&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="carousel-item col-md-4"&gt;
          &lt;div class="card"&gt;
            &lt;img class="card-img-top img-fluid" src="http://placehold.it/800x600/8e41f4/fff" alt="Card image cap"&gt;
            &lt;div class="card-body"&gt;
              &lt;h4 class="card-title"&gt;Card 7&lt;/h4&gt;
              &lt;p class="card-text"&gt;This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.&lt;/p&gt;
              &lt;p class="card-text"&gt;&lt;small class="text-muted"&gt;Last updated 3 mins ago&lt;/small&gt;&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"&gt;
        &lt;span class="carousel-control-prev-icon" aria-hidden="true"&gt;&lt;/span&gt;
        &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
      &lt;/a&gt;
      &lt;a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"&gt;
        &lt;span class="carousel-control-next-icon" aria-hidden="true"&gt;&lt;/span&gt;
        &lt;span class="sr-only"&gt;Next&lt;/span&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>