Introduction

Un carrousel permet d’afficher plusieurs contenus dans un espace réduit.
Images. Cartes. Témoignages.
Dans Framer, le carrousel est un composant natif. Il est fluide, responsive et simple à configurer.

Ce guide t’explique où le trouver, comment l’ajouter et comment régler ses paramètres essentiels.

Où trouver le carrousel dans Framer

Le carrousel fait partie des composants interactifs intégrés à Framer.

Étapes pour l’ajouter

1. Clique sur Insert dans la barre du haut

2. Ouvre la catégorie Interactive

3. Sélectionne Carousel

4. Clique dans le canvas pour l’insérer

Le carrousel apparaît vide.
C’est normal. Il attend ses contenus.

Le carrousel est un conteneur. Il ne fonctionne que s’il contient des éléments enfants.

Ajouter du contenu dans le carrousel

Un carrousel fonctionne avec des items alignés dans une direction.

Méthode simple

1. Sélectionne le carrousel dans le canvas

2. Connecte le à un élément

3. Répète pour chaque slide

Chaque élément enfant devient une diapositive.

Tu peux utiliser

• Une image
• Une frame
• Une carte
• Un composant
• Un item CMS

Bonne pratique
Chaque item doit avoir une largeur cohérente pour un défilement fluide.

Comprendre les paramètres du carrousel

Lorsque le carrousel est sélectionné, ses réglages apparaissent dans le panneau de droite.

Voici les paramètres essentiels à connaître.

Direction

Définit le sens de défilement.

• Horizontal
• Vertical

Dans la majorité des cas, utilise horizontal.

Align

Définit l’alignement des items dans le carrousel.

• Start
• Center
• End

Recommandation
Commence avec Center pour un rendu équilibré.

Gap

Définit l’espace entre chaque slide.

• Valeur en pixels
• Impact direct sur la lisibilité

Astuce
Entre 8 et 24 fonctionne dans la plupart des cas.

Padding

Définit l’espace intérieur du carrousel.

• Haut
• Bas
• Gauche
• Droite

Utile pour éviter que le contenu touche les bords.

Sizing

Le sizing définit comment le carrousel gère sa largeur et sa hauteur.

Réglages disponibles

• Width
• Height

Chaque valeur peut être réglée indépendamment.

Width

• Auto
La largeur du carrousel s’adapte à son contenu et à son conteneur.

C’est le réglage recommandé dans la majorité des cas.

Height

• Auto
La hauteur s’adapte à la hauteur des items.

Attention :
Si les items ont des hauteurs différentes, le carrousel peut changer de hauteur au scroll.

Bonne pratique :
Utilise des items avec une hauteur cohérente pour éviter les sauts visuels.

Auto, Auto est le réglage le plus sûr pour démarrer un carrousel.

Snapping

Le snapping contrôle la manière dont le carrousel se cale après un scroll.

Enable

• Yes
Le carrousel s’arrête automatiquement sur un point précis.

• No
Le scroll est totalement libre, sans arrêt automatique.

Dans la plupart des cas, active le snapping.

Edge

Définit le point d’alignement utilisé pour le snapping.

Options disponibles

• Left
Le slide s’aligne sur le bord gauche du carrousel.

• Center
Le slide se centre automatiquement dans le carrousel.

• Right
Le slide s’aligne sur le bord droit.

Recommandation
Center est le réglage le plus lisible et le plus utilisé.

Fluid

Définit le comportement du snapping pendant le scroll.

• Yes
Le snapping est plus doux et plus progressif.

• No
Le snapping est plus net, avec un arrêt plus franc.

Fading

Ajoute un fondu visuel sur les bords du carrousel.

Cet effet est purement visuel.
Il aide à suggérer qu’il y a du contenu hors écran.

Progress

Affiche un indicateur de progression du scroll.

Utile pour montrer qu’il y a plusieurs slides.

Arrows

Active les flèches de navigation.

Peut être utile si le carrousel n’est pas évident à scroller.

Erreurs fréquentes à éviter

• Ajouter un seul item
• Mélanger des largeurs très différentes
• Oublier le gap
• Forcer des tailles fixes trop tôt
• Mettre le carrousel dans un conteneur contraint

Un bon carrousel privilégie la clarté avant les effets.

Bonnes pratiques

• Utilise des items de taille cohérente
• Teste toujours le carrousel avant de publier
• Vérifie le comportement sur mobile
• Commence simple avant d’ajouter des effets

Résumé

Le carrousel Framer est un composant natif, simple et puissant.

À retenir :

• Il se trouve dans Insert → Interactive
• Il fonctionne uniquement avec des éléments enfants
• Un carrousel efficace est lisible et fluide