The Issue:
Looking at this GIF, you can see that the image transitions are not seamless. The slider is built on Bootstrap. I am also trying to ensure that the slider's body does not always adjust to the new image but maintains a minimum size. I have tried various solutions without success. Any help or ideas would be greatly appreciated. Thank you!
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 have experimented with different approaches such as "max-width" but haven't found an ideal solution yet.