При прокрутке слайдера под текущим слайдом появляется следующий/предыдущий слайд, нет плавной смены слайдов. Как исправить?

На страницу добавлен слайдер при помощи Bootstrap 4. При прокрутке слайдов вперед или назад, следующий или предыдущий слайд появляется внизу под текущим, движется, исчезает и встает в сам слайдер. Высота страницы при этом меняется: когда слайд появляется - высота увеличивается, когда исчезает и слайд встает на своё место - уменьшается. Как это убрать? Это происходит независимо от размера изображений, их количества и повтора(например, все изображения слайдера одинаковые.

Код слайдера:

<div id="carouselExampleIndicators" class="carousel slide bg-black" data-ride="carousel">
                    <ol class="carousel-indicators">
                        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                    </ol>
                    <div class="carousel-inner">
                        <div class="carousel-item bg-black active">
                            <img class="d-block" src="img/slider-top/22.jpg" alt="Первый слайд">
                        </div>
                        <div class="carousel-item bg-black">
                            <img class="d-block w-100" src="img/slider-top/222.jpg" alt="Второй слайд">
                        </div>
                        <div class="carousel-item bg-black">
                            <img class="d-block w-100" src="img/slider-top/2.jpg" alt="Третий слайд">
                        </div>
                    </div>
                    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
</div>

Стили слайдера:

.carousel {
    width: 80%;
    margin: 0 auto;
    min-height: 100%;
    min-width: 1024px;
    height: auto;
    top: 0;
    left: 0;
}
.carousel-item {
    position: relative;
}
.carousel-item img {
    width: 100%;
    height: 500px; /* высота изображения */
    object-fit: cover;
}

.carousel-indicators {
    margin-top: 10%;
    padding-top: 50%;
    bottom: -30px;
}
.carousel-control-prev {
    left: -120px;
}
.carousel-control-next {
    right: -120px;
}