title: Why bootstrap 4 slider is not working smoothly?
body: <p>I have customize bootstrap4 slider that is working but there is not smoothness when i click on <code>next</code> and <code>prev</code> buttons that is slider suddenly instead of smoothly. How can i do this do you have any idea for fix this?</p>
  
  <p>Slider given below:-</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>$('.carousel-item', '.multi-item-carousel').each(function() {
    var next = $(this).next();
    if (!next.length) {
      next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));
  }).each(function() {
    var prev = $(this).prev();
    if (!prev.length) {
      prev = $(this).siblings(':last');
    }
    prev.children(':nth-last-child(2)').clone().prependTo($(this));
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.multi-item-carousel {
    overflow: hidden;
  }
  
  .multi-item-carousel .carousel-indicators {
    margin-right: 25%;
    margin-left: 25%;
  }
  
  .multi-item-carousel .carousel-control-prev,
  .multi-item-carousel .carousel-control-next {
    /* background: rgba(255, 255, 255, 0.3); */
    width: 25%;
    z-index: 11;
    /* .carousel-caption has z-index 10 */
  }
  
  .multi-item-carousel .carousel-inner {
    width: 240%;
    left: -70%;
  }
  
  .multi-item-carousel .carousel-item-next:not(.carousel-item-left),
  .multi-item-carousel .carousel-item-right.active {
    -webkit-transform: translate3d(33%, 0, 0);
    transform: translate3d(33%, 0, 0);
  }
  
  .multi-item-carousel .carousel-item-prev:not(.carousel-item-right),
  .multi-item-carousel .carousel-item-left.active {
    -webkit-transform: translate3d(-33%, 0, 0);
    transform: translate3d(-33%, 0, 0);
  }
  
  .multi-item-carousel .item__third {
    float: left;
    position: relative;
    width: 33.33333333%;
    /* padding: 0px 10px; */
    transition: all 1s;
    transform: scale(1);
  }
  
  .multi-item-carousel .carousel-item .item__third:first-child img,
  .multi-item-carousel .carousel-item .item__third:last-child img {
    transform: scale(0.9);
    transition: all 1s;
  }
  
  .multi-item-carousel .carousel-item .item__third:first-child img {
    margin-left: 40px;
  }
  
  .multi-item-carousel .carousel-item .item__third:last-child img {
    margin-left: -40px;
  }
  
  .multi-item-carousel .controls img {
    width: 50px;
  }
  
  .multi-item-carousel .controls .carousel-control-prev,
  .multi-item-carousel .controls .carousel-control-next {
    opacity: 1 !important;
  }
  
  .multi-item-carousel .controls .carousel-control-prev img {
    margin-left: -150px;
  }
  
  .multi-item-carousel .controls .carousel-control-next img {
    margin-right: -150px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="demo" class="carousel slide multi-item-carousel mt-5" data-ride="carousel"&gt;
  
    &lt;!-- Indicators --&gt;
    &lt;ul class="carousel-indicators"&gt;
      &lt;li data-target="#demo" data-slide-to="0" class="active"&gt;&lt;/li&gt;
      &lt;li data-target="#demo" data-slide-to="1"&gt;&lt;/li&gt;
      &lt;li data-target="#demo" data-slide-to="2"&gt;&lt;/li&gt;
    &lt;/ul&gt;
  
    &lt;!-- The slideshow --&gt;
    &lt;div class="carousel-inner"&gt;
      &lt;div class="carousel-item active"&gt;
        &lt;div class="item__third"&gt;
          &lt;img src="https://i.stack.imgur.com/q0Kk7.png" alt="" class="d-block w-100"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="carousel-item"&gt;
        &lt;div class="item__third"&gt;
          &lt;img src="https://i.stack.imgur.com/QzFbS.png" alt="" class="d-block w-100"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="carousel-item"&gt;
        &lt;div class="item__third"&gt;
          &lt;img src="https://i.stack.imgur.com/8R8r3.png" alt="" class="d-block w-100"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;!-- Left and right controls --&gt;
    &lt;a class="carousel-control-prev" href="#demo" data-slide="prev"&gt;
      &lt;span class="carousel-control-prev-icon"&gt;&lt;/span&gt;
    &lt;/a&gt;
    &lt;a class="carousel-control-next" href="#demo" data-slide="next"&gt;
      &lt;span class="carousel-control-next-icon"&gt;&lt;/span&gt;
    &lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Answer will be appreciated, Thanks! </p>