Why is switching between images in the slider not smooth?

Issue

The Problem:

As you can see in this GIF, the image changes are not smooth. The slider is based on Bootstrap. I would also like to make it so that the body of the slider does not always adapt to the new image but in principle has a minimum size. I've tried a lot but I'm still not getting any idea. Thanks in advance!

HTML:

<div class="container-fluid wrapper-3">
        <div class="row" style="height: 5%;">

        </div>
        <div class="row" style="height: 80%;">
            <div class="col-md-1"></div>
            <div class="col-md-10 d-flex align-items-center justify-content-center">
                <div id="carouselExampleIndicators" class="carousel slide">
                    <div class="carousel-indicators">
                        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
                        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
                        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
                    </div>
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img src="img/slider_1.png" class="d-block w-100" alt="...">
                        </div>
                        <div class="carousel-item">
                            <img src="img/slider_2.jpg" class="d-block w-100" alt="...">
                        </div>
                        <div class="carousel-item">
                            <img src="img/slider_3.jpg" class="d-block w-100" alt="...">
                        </div>
                        <div class="carousel-item">
                            <img src="img/slider_4.png" class="d-block w-100" alt="...">
                        </div>
                    </div>
                    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Previous</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
                  </div>
            </div>
            <div class="col-md-1"></div>
        </div>
        <div class="row" style="height: 15%;">

        </div>
    </div>

CSS:

.wrapper-3 {
    height: 100vh;
}

.carousel-item img {
    max-height: 90vh;
    width: auto;
}

I've already tried things like "max-width" and the like but the current status is the best I've come up with.

Solution

As Bjorn.B mentioned, the layout jumping is due to the differing sizes of the images used in the carousel. You could consider setting them to be all the same size layout wise, and then using object-fit: contain such that they are not distorted:

.wrapper-3 {
  height: 100vh;
}

.carousel-item img {
  height: 90vh;
  width: 90vw;
  object-fit: contain;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" integrity="sha512-b2QcS5SsA8tZodcDtGRELiGv5SaKSk1vDHDaQRda0htPYWZ6046lr3kJ5bAAQdpV2mmA/4v0wQF9MyU6/pDIAg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.min.js" integrity="sha512-WW8/jxkELe2CAiE4LvQfwm1rajOS8PHasCCx+knHG0gBHt8EXxS6T6tJRTGuDQVnluuAvMxWF4j8SNFDKceLFg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="container-fluid wrapper-3">
  <div class="row" style="height: 5%"></div>
  <div class="row" style="height: 80%">
    <div class="col-md-1"></div>
    <div class="col-md-10 d-flex align-items-center justify-content-center">
      <div id="carouselExampleIndicators" class="carousel slide">
        <div class="carousel-indicators">
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
        </div>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://picsum.photos/200/800" class="d-block" alt="..." />
          </div>
          <div class="carousel-item">
            <img src="https://picsum.photos/400/400" class="d-block" alt="..." />
          </div>
          <div class="carousel-item">
            <img src="https://picsum.photos/800/400" class="d-block" alt="..." />
          </div>
          <div class="carousel-item">
            <img src="https://picsum.photos/800/200" class="d-block" alt="..." />
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
    </div>
    <div class="col-md-1"></div>
  </div>
  <div class="row" style="height: 15%"></div>
</div>

Answered By - Wongjn