Why bootstrap 4 slider is not working smoothly?

Question

I have customize bootstrap4 slider that is working but there is not smoothness when i click on next and prev buttons that is slider suddenly instead of smoothly. How can i do this do you have any idea for fix this?

Slider given below:-

$('.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));
});

.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;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div id="demo" class="carousel slide multi-item-carousel mt-5" data-ride="carousel">

  <!-- Indicators -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>

  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="item__third">
        <img src="https://i.stack.imgur.com/q0Kk7.png" alt="" class="d-block w-100">
      </div>
    </div>
    <div class="carousel-item">
      <div class="item__third">
        <img src="https://i.stack.imgur.com/QzFbS.png" alt="" class="d-block w-100">
      </div>
    </div>
    <div class="carousel-item">
      <div class="item__third">
        <img src="https://i.stack.imgur.com/8R8r3.png" alt="" class="d-block w-100">
      </div>
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>

Answer will be appreciated, Thanks!

Answer 1

Brother, I thinks that your slider is working fine, and it is smooth also. You are feeling that it is not smooth because of the thetransform property, as slides quickly change its size and at that time, there is no motion in them... If you want to make the slideshow feel more smooth then try adding animation for slide change...

But brother if you want slider like Gaana App's song player then you can copy the code below for a slider like that...

Gaana Slider

/* Create an array to hold the different image positions */
var itemPositions = [];
var numberOfItems = $('#scroller .item').length;

/* Assign each array element a CSS class based on its initial position */
function assignPositions() {
  for (var i = 0; i < numberOfItems; i++) {
    if (i === 0) {
      itemPositions[i] = 'left-hidden';
    } else if (i === 1) {
      itemPositions[i] = 'left';
    } else if (i === 2) {
      itemPositions[i] = 'middle';
    } else if (i === 3) {
      itemPositions[i] = 'right';
    } else {
      itemPositions[i] = 'right-hidden';
    }
  }
  /* Add each class to the corresponding element */
  $('#scroller .item').each(function(index) {
    $(this).addClass(itemPositions[index]);
  });
}

/* To scroll, we shift the array values by one place and reapply the classes to the images */
function scroll(direction) {
  if (direction === 'prev') {
    itemPositions.push(itemPositions.shift());
  } else if (direction === 'next') {
    itemPositions.unshift(itemPositions.pop());
  }
  $('#scroller .item').removeClass('left-hidden left middle right right-hidden').each(function(index) {
    $(this).addClass(itemPositions[index]);
  });
}

/* Do all this when the DOMs ready */
$(document).ready(function() {

  assignPositions();
  var autoScroll = window.setInterval("scroll('next')", 3000);

  /* Hover behaviours */
  $('#scroller').hover(function() {
    window.clearInterval(autoScroll);
    $('.nav').stop(true, true).fadeIn(200);
    $('.dots').stop(true, true).fadeIn(200);
  }, function() {
    autoScroll = window.setInterval("scroll('next')", 3000);
    $('.nav').stop(true, true).fadeOut(200);
    $('.dots').stop(true, true).fadeOut(200);
  });

  /* Click behaviours */
  $('.prev').click(function() {
    scroll('prev');
  });
  $('.next').click(function() {
    scroll('next');
  });
  
});

html,
body {
  height: 100%;
  margin: 0;
}
body {
  background: #fff;
}
.warning {
  margin: 0.5vw auto 0;
  width: 70vw;
  text-align: center;
  font-size: 20px;
}
#scroller {
  width: 70vw;
  height: 20vw;
  margin: 0 auto;
  padding: 3vw 0;
}
#scroller .item {
  width: 70vw;
  height: 20vw;
  display: block;
  position: absolute;
  border-radius: 1vw; color-stop(.75, transparent), to(rgba(255, 255, 255, 0.15)));
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  z-index: 0;
}
.dots {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 170px;
  z-index: 2;
  display: none;
  top: 20vw;
}
.dot1,
.dot2,
.dot3 {
  width: 50px;
  height: 5px;
  background-color: rgba(255, 255, 255, 0.6);
  display: block;
  position: absolute;
  cursor: pointer;
}
.dot1 {
  left: 0px;
}
.dot2 {
  left: 60px;
}
.dot3 {
  left: 120px;
}
.dot1:hover,
.dot2:hover,
.dot3:hover {
  background-color: rgba(255, 255, 255, 1);
}
#scroller .item img {
  display: block;
  border-radius: 1vw;
  width: 70vw;
  height: 20vw;
}
#scroller .left {
  transform: translateX(-40vw) scale(0.4, 0.6);
  -webkit-transform: translateX(-40vw) scale(0.4, 0.6);
  -moz-transform: translateX(-40vw) scale(0.4, 0.6);
  -o-transform: translateX(-40vw) scale(0.4, 0.6);
}
#scroller .middle {
  z-index: 1;
  transform: rotateY(0deg) translateX(0) scale(1);
  -webkit-transform: rotateY(0deg) translateX(0) scale(1);
  -moz-transform: rotateY(0deg) translateX(0) scale(1);
  -o-transform: rotateY(0deg) translateX(0) scale(1);
}
#scroller .right {
  transform: translateX(40vw) scale(0.4, 0.6);
  -webkit-transform: translateX(40vw) scale(0.4, 0.6);
  -moz-transform: translateX(40vw) scale(0.4, 0.6);
  -o-transform: translateX(40vw) scale(0.4, 0.6);
}
#scroller .left-hidden {
  opacity: 0;
  z-index: -1;
  transform: translateX(-430px) scale(0.3, 0.5);
  -webkit-transform: translateX(-430px) scale(0.3, 0.5);
  -moz-transform: translateX(-430px) scale(0.3, 0.5);
  -o-transform: translateX(-430px) scale(0.3, 0.5);
}
#scroller .right-hidden {
  opacity: 0;
  z-index: -1;
  transform: translateX(430px) skewY(5deg) scale(0.3, 0.5);
  -webkit-transform: translateX(430px) skewY(5deg) scale(0.3, 0.5);
  -moz-transform: translateX(430px) skewY(5deg) scale(0.3, 0.5);
  -o-transform: translateX(430px) skewY(5deg) scale(0.3, 0.5);
}
.nav {
  position: absolute;
  width: 70vw;
  height: 0;
  z-index: 2;
  display: none;
  top: 11.5vw;
}
.prev,
.next {
  position: absolute;
  display: block;
  height: 20px;
  width: 20px;
  background-color: rgba(255, 255, 255, 0);
  text-align: center;
  line-height: 26px;
  cursor: pointer;
}
.prev {
  transform: rotate(-45deg);
  left: 2vw;
  border-top: 5px solid rgba(255, 255, 255, 0.9);
  border-left: 5px solid rgba(255, 255, 255, 0.9);
}
.next {
  transform: rotate(45deg);
  border-top: 5px solid rgba(255, 255, 255, 0.9);
  border-right: 5px solid rgba(255, 255, 255, 0.9);
  right: 2vw;
}
.prev:hover {
  border-top: 5px solid rgba(255, 255, 255, 1);
  border-left: 5px solid rgba(255, 255, 255, 1);
}
.next:hover {
  border-top: 5px solid rgba(255, 255, 255, 1);
  border-right: 5px solid rgba(255, 255, 255, 1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="scroller">
  <div class="nav">
    <a class="prev"></a>
    <a class="next"></a>
  </div>
  <a class="item" href="#">
    <img src="https://i.stack.imgur.com/q0Kk7.png" />
  </a>
  <a class="item" href="#">
    <img src="https://i.stack.imgur.com/QzFbS.png" />
  </a>
  <a class="item" href="#">
    <img src="https://i.stack.imgur.com/8R8r3.png" />
  </a>
  <a class="item" href="#">
    <img src="https://i.stack.imgur.com/q0Kk7.png" />
  </a>
  <a class="item" href="#">
    <img src="https://i.stack.imgur.com/QzFbS.png" />
  </a>
  <a class="item" href="#">
    <img src="https://i.stack.imgur.com/8R8r3.png" />
  </a>
  <div class="dots">
    <a class="dot1"></a>
    <a class="dot2"></a>
    <a class="dot3"></a>
  </div>
</div>

You can add any number of slides to it by giving them class of item!! And make sure that you change its dimensions according to you need by little bit of CSS only...

If you want that the other side slides must be styled differently like- they must be big or a bit tilted or rotated then specify all this in CSS section of [left-hidden, left, middle, right, right-hidden]... You can easily define their animation also by a bit of CSS in that section only!!!

Please let me know in comments if you want any type of help or explanation of the above code...
Thanks,
Om Chaudhary