Le bloc Diaporama présente des images, des vidéos ou des contenus en plein cadre et montre une diapositive à la fois. Cette page décrit ses blocs de navigation, ses réglages de rotation, l’apparition des diapositives et son comportement au clavier.
Ajouter le bloc
Insérez le bloc Diaporama (Ajouter un bloc), ou tapez diaporama dans la recherche des blocs. Il montre une diapositive à la fois. Pour montrer plusieurs éléments côte à côte, une rangée de logos par exemple, prenez le Carrousel.
Ajouter des diapositives
- Le bouton Ajouter un média, dans la barre d’outils du diaporama, ouvre la médiathèque. Choisissez plusieurs images ou vidéos d’un coup : chacune devient une diapositive ajoutée à la fin.
- Sur une diapositive, Ajouter avant ou Ajouter après du menu ⋮, ou
Ctrl+Alt+TetCtrl+Alt+Y, insèrent une diapositive vide à cet endroit. Choisissez son média dans le bloc. - Déplacez une diapositive pour changer l’ordre, supprimez-la pour la retirer : les indicateurs suivent.
Une diapositive est un bloc Média. Elle reçoit le style enregistré Diapositive du diaporama, qui remplace le style Image des médias. Un cadre ou des coins arrondis choisis pour vos images ne s’appliquent pas aux diapositives. Un style que vous ajoutez vous-même reste.
Les blocs qui composent le diaporama
La navigation du diaporama est faite de blocs que vous habillez comme les autres, état par état. Elle suit les diapositives : une diapositive ajoutée, déplacée ou supprimée met à jour ses indicateurs.
| Bloc | Rôle | États |
|---|---|---|
| Navigation du diaporama | La rangée des indicateurs et des flèches. | Par défaut, Survol, Actif |
| Élément de navigation du diaporama | Un indicateur. Vous y posez un texte, un titre, un média, une icône ou une vignette. | Par défaut, Survol, Focus, Actif |
| Forme d’indicateur du diaporama | Un indicateur en forme de point, entièrement stylable. | Par défaut, Survol, Actif |
| Vignette du diaporama | Une miniature qui reprend le média de sa diapositive. Si la diapositive change d’image, la vignette suit. | Par défaut, Survol, Actif |
| Bouton de navigation | Les flèches Précédent et Suivant. | Par défaut, Survol, Focus, Actif, Désactivé |
L’état Actif d’un indicateur habille celui de la diapositive affichée. Pour mettre une bordure épaisse sur la vignette de la photo montrée, sélectionnez l’indicateur, choisissez l’état Actif dans l’onglet Styles et réglez sa bordure (Régler la taille, les bordures et les effets).
Régler le diaporama
Sélectionnez le bloc Diaporama, ouvrez l’onglet Réglages puis le panneau Réglages du diaporama. Certains réglages dépendent du mode de rotation : la colonne Effet le précise.
| Réglage | Effet | Valeur par défaut |
|---|---|---|
| Diapositive active par défaut | La diapositive affichée au chargement de la page. | Diapositive 1 |
| Afficher les diapositives voisines | Aligne les diapositives côte à côte : celle qui s’affiche au milieu, ses voisines qui dépassent sur les bords. Le visiteur clique ou fait glisser une voisine pour l’amener au milieu. | Désactivé |
| Fondu enchaîné | La nouvelle diapositive apparaît par-dessus la précédente, qui reste affichée jusqu’à ce que la nouvelle le soit. Désactivé, la précédente disparaît d’un coup. Absent avec les diapositives voisines. | Activé |
| Mode de rotation | Manuelle : le visiteur avance. Auto : les diapositives changent seules. Les deux : elles changent seules et le visiteur peut naviguer. | Manuelle |
| Type de navigation | Symbole : des indicateurs que vous composez. Vignette : chaque indicateur reçoit une miniature de sa diapositive. Aucune : pas d’indicateur, les flèches restent. En mode Manuelle ou Les deux. | Symbole |
| Désactiver la navigation par flèches | Retire les flèches précédent et suivant. Grisé avec le type Aucune. À l’inverse, Aucune est grisé quand les flèches sont retirées : le diaporama garde toujours une navigation. En mode Manuelle ou Les deux. | Désactivé |
| Position de la navigation | Place les indicateurs Haut, Droite, Bas ou Gauche du diaporama. En mode Manuelle ou Les deux. | Haut |
| Afficher un bouton de pause | Pose un bouton qui arrête la rotation. En mode Auto ou Les deux. | Activé |
| Durée de rotation aléatoire | Tire au sort l’intervalle entre deux diapositives, entre un minimum et un maximum. En mode Auto ou Les deux. | Désactivé |
| Durée de rotation (ms) | Le temps d’affichage d’une diapositive, de 500 à 10 000 ms. | 2 000 ms |
| Durée de rotation minimale (ms) et Durée de rotation maximale (ms) | Les bornes de l’intervalle tiré au sort, de 500 à 10 000 ms. Avec Durée de rotation aléatoire. | 2 000 ms et 3 000 ms |
La rotation automatique
Un diaporama ne tourne pas seul tant que vous ne le décidez pas : le mode de départ est Manuelle. En mode Auto ou Les deux, il reçoit un bouton de pause.
- Le bouton est un rond de 44 px en haut à droite du diaporama. Il reste discret pendant la rotation et devient bien visible au survol, au clavier ou une fois la rotation arrêtée. Il porte l’icône pause, qui devient l’icône lecture à l’arrêt. Un lecteur d’écran l’annonce Mettre le diaporama en pause.
- Le bouton n’est pas un bloc : il ne se déplace ni ne se supprime. Seule la case Afficher un bouton de pause le retire.
- La rotation s’arrête tant que le focus est dans le diaporama. Choisir une diapositive relance le compte à zéro.
Sans bouton de pause, le diaporama s’arrête sous le pointeur, au toucher et quand le clavier atteint un lien qu’il contient. Des diapositives sans lien ne peuvent pas être arrêtées au clavier. Le panneau affiche alors un avertissement. Le panneau Accessibilité de l’éditeur relève le même défaut, au critère WCAG 2.2.2.
L’apparition d’une diapositive
Chaque diapositive reçoit à son ajout une animation Fondu d’entrée de 600 ms, déclenchée Quand il est activé et réglée sur Rejouer. Vous la trouvez dans l’onglet Animations de la diapositive.
- Pour un autre effet, remplacez le fondu dans l’onglet Animations. Chaque diapositive peut avoir le sien.
- Pour un passage sans effet, supprimez l’animation. Une animation retirée n’est jamais remise.
- Avec Fondu enchaîné, la diapositive qui s’en va reste affichée sous la nouvelle pendant tout son fondu : le fond du diaporama ne se voit jamais.
- Avec Afficher les diapositives voisines, aucune diapositive ne reçoit ce fondu : il rendrait les voisines invisibles.
L’affichage de la diapositive active et le masquage des autres sont gérés par le style Diapositive du diaporama. Sur une diapositive, la case Masquer ce bloc de l’onglet Styles est grisée. Une diapositive masquée sort de la page : le clavier n’y entre pas et un lecteur d’écran ne la lit pas.
Les diapositives voisines
Avec Afficher les diapositives voisines, le diaporama montre une rangée : la diapositive du milieu et un bout de ses deux voisines. La dernière diapositive est suivie de la première.
- Une diapositive occupe 80 % du diaporama tant que vous ne lui donnez pas une autre largeur, dans l’onglet Styles. Une diapositive plus étroite montre plus de ses voisines.
- L’état Par défaut de la diapositive habille les voisines, son état Actif celle du milieu. Une opacité de 50 % à l’état Par défaut et de 100 % à l’état Actif atténue les voisines.
- Les voisines ne se lisent ni au clavier ni par un lecteur d’écran : on les atteint par les flèches et les indicateurs.
Sur téléphone
Avec les diapositives voisines, un glissé du doigt sur le côté amène la voisine au milieu. Pour un visiteur qui demande moins de mouvement, les diapositives changent de place sans glisser.
Accessibilité
- Les indicateurs répondent au clavier :
←et→passent de l’un à l’autre,EntréeouEspacechoisit. - Un lecteur d’écran annonce la navigation comme un jeu d’onglets, chaque indicateur avec son rang et son état. Chaque diapositive est reliée à son indicateur.
- Les flèches s’activent au clic, à
Entréeet àEspace. Elles fonctionnent sans indicateurs, avec le type de navigation Aucune.