# Diaporama

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](https://lovelyrender.com/fr/documentation/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](https://lovelyrender.com/fr/documentation/bloc-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+T` et `Ctrl+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](https://lovelyrender.com/fr/documentation/bloc-media/). 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](https://lovelyrender.com/fr/documentation/taille-bordures-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 |

![Le panneau Réglages du diaporama en mode Manuelle : Diapositive active par défaut sur Diapositive 1, Afficher les diapositives voisines désactivé, Fondu enchaîné activé, Mode de rotation, Type de navigation sur Symbole, Désactiver la navigation par flèches et Position de la navigation sur Haut.](https://static.lovelyrender.com/uploads/2026/10/910-doc-blocs2-diaporama.png)

**Attention :** En mode **Auto**, la navigation est masquée : les indicateurs ne suivent pas la rotation automatique. Pour garder des indicateurs cliquables pendant la rotation, choisissez **Les deux**.

## 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.

**Remarque :** Pour un visiteur qui demande moins de mouvement, un diaporama en mode **Les deux** reste sur sa diapositive de départ. Il se parcourt avec sa navigation, sans bouton de pause. En mode **Auto**, il continue de tourner sans fondu et garde son bouton : arrêté, ses autres diapositives ne seraient jamais vues.

## 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ée` ou `Espace` choisit.
- 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ée` et à `Espace`. Elles fonctionnent sans indicateurs, avec le type de navigation **Aucune**.

**Conseil :** Pour un visuel d’accueil en trois images, laissez le mode **Manuelle** : rien ne bouge sous les yeux du visiteur et il choisit lui-même.

## Voir aussi

- [Carrousel](https://lovelyrender.com/fr/documentation/bloc-carrousel/)
- [Onglets](https://lovelyrender.com/fr/documentation/bloc-onglets/)
- [Média](https://lovelyrender.com/fr/documentation/bloc-media/)
- [Animer un bloc](https://lovelyrender.com/fr/documentation/animations/)