Fonctionnement de la hauteur automatique sur un curseur Swiper vertical dans Webflow à l'aide de Finsweet Components ou Swiper.JS
Les curseurs verticaux à hauteur automatique font partie de ces éléments que Internet considère collectivement comme « non pris en charge ».
Les médecins de Swiper disent non.
Finsweet dit non.
Les forums regorgent de demi-solutions, de hacks et d'un léger désespoir.
Et pourtant, il faire travail.
Nous avons découvert cela sur une version récente de Webflow qui consiste essentiellement en des curseurs vers le bas. Des balais horizontaux ? Facile. La hauteur automatique fonctionne dès la sortie de l'emballage. Des balais verticaux ? Une histoire différente.
L'astuce consiste à comprendre que Swiper est extrêmement pointilleux en matière de mise en page.
Voici ce qui fait que cela fonctionne réellement :
- Le la liste de balayage et son emballage ont besoin d'une hauteur fixe
- Chaque la diapositive doit être affichée : bloc (Flex le casse complètement)
- Le contenu de la diapositive doit être en hauteur : automatique avec hauteur minimale : ajustement du contenu
C'est ça. Pas de piratage JavaScript. Ne redimensionnez pas les observateurs. Pas d'astuces de duplication étranges.
Une fois ces règles en place, Swiper recalcule correctement la hauteur à mesure que les diapositives changent, même lorsque la longueur du contenu de chaque diapositive est très différente.
La vidéo ci-dessus décrit la configuration exacte d'un composant Webflow, y compris comment le garder flexible et réutilisable sans coder le contenu en dur.
Parfois, les docteurs se trompent.
Parfois, la solution consiste simplement à comprendre ce que veut réellement le navigateur.
Si vous vous battez contre un curseur vertical en ce moment, vous n'êtes pas fou.
Vous aviez juste besoin d'un petit coup de pouce dans la bonne direction.
