Элементы вертикальной вертикальной карусели в ответном состоянии

Question

У меня есть карусель с элементами, которые имеют переменную высоту в отзывчивом, и я хочу центрировать их по вертикали внутри внутреннего контейнера. И я делаю (используя flex, top transform и т. Д.) ... но они сосредоточены только тогда, когда они закончили анимацию, когда они становятся активными, поэтому сначала они выровнены сверху, а затем спускаются, и кажется, что они прыгают.

Я думаю, что это что-то вроде анимации Bootstrap для карусели, но я не понял ее. Страница https://zuckermanlaw.swapps.io, карусель находится в разделе «Наши услуги». Буду признателен за любую помощь. Благодарю.

Answer 1

Просто добавьте высоту, такую ​​же, как ваш класс карусели - внутренний класс должен быть ниже класса, хотя немного растяните изображения, но исправьте проблему.

section.third-section #carousel-our-services .carousel-inner .item .carousel-caption { 
     display: flex; 
     height: 365px;  
    } 

Надеюсь, это вам поможет. Наслаждайтесь :)

Answer 2

Я играл с этим и придумал это.

@media (-webkit-transform-3d), not all 
    .carousel-inner>.item.active, .carousel-inner>.item.next.left, .carousel-inner>.item.prev.right { 
position: absolute; 
left: 0; 
right: 0; 
top: 50%; 
transform: translate(0,-50%); // IE9 
transform: translate3d(0,-50%,0); // Modern Browsers 
    } 

Я заменил все объявления для этого селектора. Он изменяет стиль анимации, но выравнивается по вертикали. Лично я считаю, что это выглядит круто, но вы не можете. Я думал, это все равно стоит показать тебе. Это может быть хорошим началом для вас. Я сделал это в инспекторе браузера, и это было единственное изменение, которое я сделал.