Bootstrap 4 Carousel Show 2 Slides Advance 1

Question

I\'m trying to show two slides on a Bootstrap 4 carousel while only advancing 1 when next or prev is clicked. It\'s doing it now but when it does, it doesn\'t smoothly slide ove

Answer 1

It is working as expected (one at a time) but because the images are all the same it's hard to see. Try with different images like this...

https://www.bootply.com/9YTnuqUPMs

To make the animation more Bootstrap 4 friendly, override the transitions like this...

.carousel-inner .carousel-item-left.active {
  transform: translateX(-50%);
}
.carousel-inner .carousel-item-right.active {
  transform: translateX(50%);
}

.carousel-inner .carousel-item-next {
  transform: translateX(50%)
}
.carousel-inner .carousel-item-prev {
  transform: translateX(-50%)
}

.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left{ 
  transform: translateX(0);
}

https://www.bootply.com/G33EYIj4eF

---

Also see: https://stackoverflow.com/a/20008623/171456

Answer 2

I see what's wrong. If you want to have the same result as the first one, you will change:

<div class="carousel-item">
<img class="d-block col-6 img-fluid" src="http://placehold.it/350x150">
<img class="d-block col-6 img-fluid" src="http://placehold.it/350x150">
</div>

Two pictures in one carousel-item.