Carrousel avec hauteur variable en transition douce

Hello,

J’ai un « carousel boostrap » avec des témoignages clients. Certains sont un peu plus longs que d’autres suivant les slides et les devices.

Comment préciser en CSS une transition douce pour que le contenu plus bas remonte en douceur lorsque le slide est plus court ? Merci.

https://codepen.io/vZgtErTghZdQdgZA/pen/PoRdGjq
Modifié par myself (11 Aug 2022 - 17:15)

Bonjour,

Une solution avec une transition css qui peut sûrement être améliorée : https://jsfiddle.net/gbc2w0p3/

Au changement de slide avec l'event 'slide.bs.carousel', pour éviter de casser l'affichage du carrousel, je crée un clone invisible (visibility hidden) du prochain slide que j'ajoute dans le carrousel en display block afin de pouvoir récupérer sa hauteur que j'affecte au conteneur .carousel-inner.
La hauteur de .carousel-inner doit également être définie au chargement de la page avec la hauteur du slide actif .carousel-item.active pour que la transition css fonctionne lors du premier changement de slide.

Merci Pitet.

Je pensais naïvement qu’on pouvait faire ça tout en CSS ^^