Как добавить плавный переход к изображениям в карусели Bootstrap 5? ⇐ CSS

[Anonymous]

В настоящее время я использую карусель Bootstrap 5 и хочу добавить переход, при котором при нажатии стрелки «Далее» карусель медленно исчезает, а затем снова появляется, и отображается следующее изображение. Я хочу этого, потому что изображения в моей карусели имеют разные размеры, поэтому, когда вы нажимаете «Далее», карусель просто быстро обрезается, и это выглядит не очень хорошо.

Вот что у меня сейчас есть:

Тестирование

Вот мой CSS -

.carousel-item { ширина: 100%; высота: 100%; переполнение: скрыто; } .fadeIn { видимость: видимая; непрозрачность: 1; переход: непрозрачность 2s линейная; } .исчезать { видимость: скрыта; непрозрачность: 0; переход: видимость 0с 2с, непрозрачность 2с линейная; } И, наконец, вот мой JS -
функция nextSlide() { const carousel = document.getElementById('myCarousel'); const activeItem = carousel.querySelector('.carousel-item.active'); const nextItem = activeItem.nextElementSibling || carousel.querySelector('.carousel-item:first-child'); setTimeout(() => { activeItem.classList.remove('активный'); activeItem.classList.add("fadeOut"); activeItem.classList.remove("fadeIn"); nextItem.classList.add('активный'); nextItem.classList.remove("fadeOut"); nextItem.classList.add("fadeIn") }, 3000); }