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=".5.0/css/bootstrap.min.css">
<script src=".5.1/jquery.min.js"></script>
<script src=".js/1.16.0/umd/popper.min.js"></script>
<script src=".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=".png" alt="" class="d-block w-100">
      </div>
    </div>
    <div class="carousel-item">
      <div class="item__third">
        <img src=".png" alt="" class="d-block w-100">
      </div>
    </div>
    <div class="carousel-item">
      <div class="item__third">
        <img src=".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>

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./bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis./ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./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.sstatic/q0Kk7.png" alt="" class="d-block w-100">
      </div>
    </div>
    <div class="carousel-item">
      <div class="item__third">
        <img src="https://i.sstatic/QzFbS.png" alt="" class="d-block w-100">
      </div>
    </div>
    <div class="carousel-item">
      <div class="item__third">
        <img src="https://i.sstatic/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!

• javascript
• html
• jquery
• css
• bootstrap-4

• It slides smoothly in the latest stable versions FF, Chrome & Opera (all on PC) for me, apart from the z-index & scale popping a little bit. What is it you're seeing, what do you expect to see, and what browsers is it not working in for you? – indextwo Commented Jun 9, 2020 at 14:13
• 2 @indextwo this is not working smothly when you click on next & prev buttons there is image zoom suddenly, if you see properly then you able to find that. Why suddenly text size big it should be smooth. Like we have three slider at a time center(active) slider is big than left and right side slider, when you click on next and preview it should be big smoothly. – Rohit Verma Commented Jun 9, 2020 at 16:01
• As you are concerned with smoothness, have you checked prefers-reduced-motion CSS? Just in case. – Tariqul Islam Commented Jun 12, 2020 at 9:32
• actually i tried with transition but this is also not working for this, have you seen Gaana App slider i want like that smoothness on change song. – Rohit Verma Commented Jun 12, 2020 at 9:41
• @RohitVerma I don't think you want to be using Bootstrap Carousel. It's better if you use your own made carousel as your requirements are very different from what Boostrap Carousel can provide. – Richard Commented Jun 14, 2020 at 4:32

1 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./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.sstatic/q0Kk7.png" />
  </a>
  <a class="item" href="#">
    <img src="https://i.sstatic/QzFbS.png" />
  </a>
  <a class="item" href="#">
    <img src="https://i.sstatic/8R8r3.png" />
  </a>
  <a class="item" href="#">
    <img src="https://i.sstatic/q0Kk7.png" />
  </a>
  <a class="item" href="#">
    <img src="https://i.sstatic/QzFbS.png" />
  </a>
  <a class="item" href="#">
    <img src="https://i.sstatic/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 ments if you want any type of help or explanation of the above code...
Thanks,
Om Chaudhary