Comment obtenir la hauteur automatique sur un slider Swiper vertical dans Webflow, avec Finsweet Components ou Swiper.js, grâce à trois règles de mise en page simples et sans JavaScript.
La hauteur automatique sur un slider vertical fait partie de ces choses que tout Internet s’accorde à dire « non prises en charge ».
La documentation de Swiper n’explique pas comment faire.
Finsweet, en quelque sorte, dit non.
Les forums regorgent de demi-solutions, de bricolages et de désespoir modéré.
Et pourtant, ça fonctionne.
Nous sommes tombés dessus sur un récent projet Webflow qui n’est, en gros, que des sliders du début à la fin. Les swipers horizontaux ? Faciles. La hauteur automatique fonctionne d’emblée. Les swipers verticaux ? Une tout autre histoire.
L’astuce, c’est de comprendre que Swiper est extrêmement pointilleux sur la mise en page.
Voici ce qui le fait vraiment fonctionner :
- La liste du swiper et son wrapper doivent avoir une hauteur fixe
- Chaque slide doit être en display: block (flex casse tout complètement)
- Le contenu du slide doit avoir height: auto avec min-height: fit-content
C’est tout. Pas de bricolage JavaScript. Pas de resize observers. Pas de drôles d’astuces de duplication.
Une fois ces règles en place, Swiper recalcule correctement la hauteur au fil des slides, même quand chacun a un contenu de longueur très différente.
Un bémol : cette hauteur fixe sur la liste et le wrapper est un peu pénible sur les petits écrans, alors vérifiez vos points de rupture.
La vidéo ci-dessus détaille la configuration exacte dans un composant Webflow, y compris comment la garder souple et réutilisable sans coder le contenu en dur. Elle fonctionne de la même manière que votre slider vertical vienne de la bibliothèque Finsweet Components ou de Swiper.js configuré à la main.
Parfois, la documentation ne dit tout simplement rien.
Parfois, la solution consiste simplement à comprendre ce que le navigateur attend réellement.
Si vous vous battez en ce moment avec un slider vertical, vous n’êtes pas fou.
Il vous manquait juste un petit coup de pouce de mise en page dans la bonne direction.
Les sliders sont un vrai gouffre sans fond, même dans le meilleur des cas. Si vous créez vos propres commandes de slider, jetez un œil à notre article sur les commandes de slider personnalisées dans Webflow. Pour que le mouvement soit juste, notre guide visuel des fonctions d’accélération Webflow vous aidera, et si la mise en page doit s’adapter à l’écran, nous avons aussi écrit sur les tailles de police qui s’ajustent à la fois à la largeur et à la hauteur du viewport. Vous construisez un composant à réutiliser ? Jetez un coup d’œil à nos cloneables Webflow.
Hauteur automatique d’un slider vertical : réponses rapides
Un slider Swiper vertical peut-il avoir une hauteur automatique ?
Oui. La documentation de Swiper ne décrit la hauteur automatique qu’en termes généraux, mais elle fonctionne sur un slider vertical dès lors que la liste du swiper et son wrapper ont une hauteur fixe, que chaque slide est en display: block et que le contenu du slide utilise height: auto avec min-height: fit-content.
Pourquoi display: flex casse-t-il la hauteur automatique sur un slider vertical ?
Lors de nos tests, Swiper n’arrivait pas à calculer la hauteur du slide quand celui-ci était un conteneur flex, et passer le slide en display: block a réglé le problème. Des valeurs de hauteur comme max-content n’ont pas fonctionné non plus pour nous, alors tenez-vous-en à height: auto et min-height: fit-content.
Cela fonctionne-t-il avec le composant slider de Finsweet ?
Oui, sur notre projet, où les sliders étaient des Finsweet Components construits sur Swiper.js. Les mêmes trois règles s’appliquent si vous configurez Swiper.js vous-même dans Webflow.
