Carrousel

Le bloc Carrousel fait défiler une série d’éléments sur une ligne : une bande de logos, des cartes ou une galerie. Cette page décrit ses quatre modes de défilement, les réglages de chacun, l’adaptation automatique et son comportement au clavier.

Ajouter le bloc

Insérez le bloc Carrousel (Ajouter un bloc). Il contient une Piste du carrousel, la rangée où vous posez vos éléments : des logos, des cartes ou des photos. Sur la piste, le bouton Ajouter un média de la barre d’outils ajoute des images ou des vidéos de la médiathèque.

La piste est une grille. La largeur de ses éléments se règle avec les contrôles de taille habituels (Régler la taille, les bordures et les effets). Pour écarter les éléments, appliquez à la piste le style enregistré Espacé, un écart de 8 px (Espacer vos blocs).

Un Diaporama montre une diapositive à la fois. Le carrousel laisse voir plusieurs éléments côte à côte.

Choisir un mode de défilement

Sélectionnez le bloc Carrousel, ouvrez l’onglet Réglages puis le panneau Réglages du carrousel. Le premier réglage, Mode de défilement, commande les autres.

Les réglages de chaque mode

Automatique

Le ruban s’arrête quand le visiteur le touche du doigt ou quand le clavier arrive sur un lien qu’il contient. Un deuxième toucher le relance.

Manuel

Sans boucle, une flèche arrivée en bout de course devient inactive et ne fait plus rien. Un lecteur d’écran l’annonce désactivée et elle reste atteignable au clavier. Pour l’habiller, sélectionnez le Bouton de navigation et choisissez l’état Désactivé dans l’onglet Styles. Une opacité de 40 % l’atténue par exemple.

Au défilement

• Tout ce qui suit le carrousel dans le même conteneur reste à l’écran avec lui. Placez la section suivante dans ce conteneur : le visiteur la voit sous la piste pendant qu’elle défile.
• Une fois la piste au bout, la page reprend son défilement.
• Un carrousel plus haut que l’écran s’arrête en haut. Il se recale quand la page change : une image qui arrive ou un écran tourné. Sur téléphone, la barre d’adresse qui paraît ou disparaît ne le déplace pas.

Balayage (aimanté)

Ce mode utilise le défilement du navigateur et se passe de script. Il s’adapte seul à la place disponible et n’a pas de réglage Adaptation automatique.

L’adaptation automatique

Avec Adaptation automatique, en mode Automatique ou Manuel, le carrousel ne défile que si ses éléments débordent du cadre. Sur un grand écran où tout tient, il devient une rangée fixe et centrée, sans flèches. Sur un petit écran, il redevient défilable. Il mesure de nouveau sa largeur et sa hauteur quand les images et les polices ont fini de charger.

Le réglage n’existe pas en mode Au défilement ni en mode Balayage (aimanté).

Sur téléphone

• En mode Automatique, un toucher du doigt arrête le ruban et un second le relance.
• En mode Balayage (aimanté), le visiteur fait glisser la piste au doigt.
• Avec Adaptation automatique, une rangée fixe sur ordinateur devient défilable sur téléphone, sans réglage par écran.

Accessibilité

• Pour un visiteur qui demande moins de mouvement, par son système ou par le Sélecteur d’animations, le ruban du mode Automatique reste immobile. En mode Au défilement, rien ne s’arrête ni ne bouge avec la page : la piste se fait glisser au doigt et chaque élément reste atteignable.
• Les flèches précédent et suivant s’activent au clavier, avec Entrée ou Espace.
• Le Bouton de navigation a cinq états à habiller : Par défaut, Survol, Focus, Actif et Désactivé.

Voir aussi

• Diaporama
• Animer au défilement
• Espacer vos blocs