CARROUSEL DE MÉDIAS
(SCROLL-SNAP)

0. Comment ajouter le carrousel dans l'éditeur (étape de configuration)

1. Dans l'éditeur de blocs, ajoutez le bloc Carrousel de médias (Scroll-snap)
2. Choisissez le mode Manuel lorsque vous y êtes invité (Accessible uniquement en contexte)
3. Téléchargez ou sélectionnez plusieurs images
4. (Facultatif) Pour chaque image :
   • – Cliquez sur l'icône de lien sur l'image
   • – Définissez une URL (et une cible si nécessaire)
5. Dans le panneau de réglages du bloc (barre latérale droite):
   • Activez ou désactivez la pagination mobile
6. Enregistrez / publiez la page et testez-la sur le site

1. Vérifications visuelles et de la mise en page

Orientation de l'image

Vérifiez que le carrousel s'affiche correctement dans les cas suivants (tous les scénarios sont déjà configurés ci-dessus) :

• Mélange d'images portrait et paysage
• Images paysage uniquement
• Images portrait uniquement

Attendu :

• L'orientation est déterminée automatiquement à partir du rapport hauteur/largeur de l'image
• Les diapositives conservent une hauteur constante (ceci est un réglage dans la barre latérale, par défaut : 450px)
• La mise en page correspond à Figma sur ordinateur et mobile

2. Ordre et contenu

• Les images apparaissent dans l'ordre exact défini dans l'éditeur (cliquez sur « Modifier les images » pour les réorganiser par glisser-déposer)
• La réorganisation des images dans le CMS met à jour l'ordre sur le site

3. Comportement sur ordinateur

• Les flèches gauche / droite sont visibles sur ordinateur
• Cliquer sur les flèches permet de naviguer entre les diapositives
• Le carrousel ne défile pas au-delà de la première ou de la dernière diapositive.
• Le comportement sur écran large correspond à Figma (pas de flèches et contenu centré).

4. Comportement sur mobile

• Faites glisser à gauche/droite pour naviguer entre les diapositives.
• Le défilement natif et le comportement d'accrochage sont fluides.
• Pagination 1 / n :
  • S'affiche uniquement sur mobile
  • S'affiche uniquement si activé dans les réglages du bloc
  • Reflète correctement l'index de la diapositive actuelle.

5. Liens d'images (Mode manuel)

Si des liens d'images sont définis dans l'éditeur :

• Cliquer sur une image navigue vers l'URL configurée.
• Les images sans lien ne sont pas cliquables.
• Les images liées se comportent correctement sur mobile et ordinateur.

7. Vérifications d'accessibilité

Clavier

• Les commandes du carrousel sont accessibles par la touche Tab.
• Les boutons fléchés peuvent être activés avec la touche Entrée.
• Les flèches du clavier (droite/gauche) contrôlent le carrousel.
• Les images liées peuvent être activées via le clavier.

Lecteur d'écran

• Le contenu est lu dans un ordre logique.
• Les commandes de pagination et de navigation sont annoncées correctement.

8. Hors champ : Mode En vedette

Puisque ce carrousel étend le “carrousel de médias” existant, il peut être utilisé sur n'importe quel type de publication utilisant des images mises en avant avec le mode “en vedette” au lieu du mode manuel.
Il extraira alors le contenu des images mises en avant attachées à la publication, ce composant pourrait donc être utilisé dans un bloc de boucle de requête ou sur des pages uniques comme dans les exemples ci-dessous :

PAGE D'OFFRE UNIQUE (bloc ajouté en bas)

LISTE DE BOUCLE DE REQUÊTE (non existant dans Figma) :