# 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](https://lovelyrender.com/fr/documentation/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](https://lovelyrender.com/fr/documentation/taille-bordures-effets/)). Pour écarter les éléments, appliquez à la piste le style enregistré **Espacé**, un écart de 8 px ([Espacer vos blocs](https://lovelyrender.com/fr/documentation/espacer-vos-blocs/)).

Un [Diaporama](https://lovelyrender.com/fr/documentation/bloc-slider/) 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.

| Mode | Comportement |
| --- | --- |
| **Automatique** | La piste avance seule, en continu, comme un ruban. C’est le mode d’un carrousel inséré. |
| **Manuel** | Le visiteur fait avancer la piste avec les flèches précédent et suivant. |
| **Au défilement** | Le carrousel s’arrête à l’écran et sa piste avance au rythme du défilement de la page. |
| **Balayage (aimanté)** | Le visiteur fait glisser la piste au doigt ou à la souris. Elle se cale sur un élément à l’arrêt. |

## Les réglages de chaque mode

### Automatique

| Réglage | Effet | Valeur par défaut |
| --- | --- | --- |
| **Direction** | **De droite à gauche** ou **De gauche à droite**. | **De gauche à droite** |
| **Pause au survol** | Arrête la piste tant que le pointeur est dessus. | Désactivé |
| **Vitesse (px/s)** | Les pixels parcourus par seconde, de 20 à 2 000. 200 est lent et calme, 800 rapide. | 200 |
| **Adaptation automatique** | Ne fait défiler la piste que si ses éléments ne tiennent pas tous dans le cadre. Sinon, ils restent fixes. | Désactivé |

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

| Réglage | Effet | Valeur par défaut |
| --- | --- | --- |
| **Boucle infinie** | Activé, le carrousel boucle sans rupture. Désactivé, la navigation s’arrête au premier et au dernier élément. | Activé |
| **Adaptation automatique** | Ne fait défiler la piste que si ses éléments ne tiennent pas tous dans le cadre. | Désactivé |

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

| Réglage | Effet | Valeur par défaut |
| --- | --- | --- |
| **Direction** | **De droite à gauche** ou **De gauche à droite**. Les positions de départ et d’arrivée suivent. | **De gauche à droite** |
| **Positions mesurées sur** | **La largeur de la piste** : à -100 %, la piste sort entièrement de l’écran. Ce choix convient à un objet qui traverse. **Les bords du carrousel** : sur tous les écrans, la piste commence au bord gauche du carrousel à 0 % et finit au bord droit à -100 %. | **La largeur de la piste** |
| **Position de départ (%)** et **Position d’arrivée (%)** | Où se trouve la piste au début et à la fin du mouvement, de -100 à 100. | -100 et 100 de gauche à droite, 100 et -100 de droite à gauche |
| **Vitesse de défilement (×)** | La distance parcourue par la piste pour chaque pixel défilé, de 0,25 à 4 par pas de 0,25. 1 avance autant que la page, 2 deux fois plus. | 1 |
| **Reste à l’écran** | **En haut de l’écran** ou **À une hauteur donnée** : l’endroit où le carrousel s’arrête pendant que sa piste avance. | **En haut de l’écran** |
| **Milieu à (% depuis le haut)** | La hauteur de l’écran où s’arrête le milieu du carrousel, de 10 à 90 par pas de 10. 50 correspond au centre. Avec **À une hauteur donnée**. | 50 |

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

**Conseil :** Pour des cartes qui défilent au milieu de l’écran, du premier élément au dernier, mesurez les positions sur **Les bords du carrousel**, de 0 à -100. Choisissez **À une hauteur donnée** et laissez 50. Si le défilement est trop long, montez **Vitesse de défilement (×)**.

### Balayage (aimanté)

| Réglage | Effet | Valeur par défaut |
| --- | --- | --- |
| **Axe de balayage** | **Horizontal** ou **Vertical**. | **Horizontal** |
| **Force de l’aimantation** | **Toujours aimanter** : la piste se cale toujours sur un élément. **Aimanter quand c’est proche** : elle ne se cale que si elle s’arrête près d’un élément. | **Toujours aimanter** |
| **Alignement de l’aimantation** | Où l’élément se cale dans le cadre : **Début**, **Centre** ou **Fin**. | **Centre** |

![Le panneau Réglages du carrousel en mode Balayage (aimanté) : Axe de balayage sur Horizontal, Force de l’aimantation sur Aimanter quand c’est proche et Alignement de l’aimantation sur Centre.](https://static.lovelyrender.com/uploads/2026/10/205-blocs-carrousel.png)

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](https://lovelyrender.com/fr/documentation/bloc-selecteurs-d-apparence/), 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](https://lovelyrender.com/fr/documentation/bloc-slider/)
- [Animer au défilement](https://lovelyrender.com/fr/documentation/animations-au-defilement/)
- [Espacer vos blocs](https://lovelyrender.com/fr/documentation/espacer-vos-blocs/)