I'm currently working on a carousel project. However, I encountered an issue where the images slide down initially and then jump up to the correct level as depicted in the image below. I've tried adjusting the height, width, and auto settings to no avail.
https://i.sstatic.net/mBO9I.png
I followed the Bootstrap documentation and incorporated my own images into the code:
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselIndex" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselIndex" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselIndex" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
CSS :
#carouselIndex {
overflow-y: hidden;
width: 60vw;
border: 1px solid red;
}