# Carousel

A partir de la liste vue dans [Créer un élément de contenu](/guide-utilisateur-dotea/gestion-des-pages/creer-un-element-de-contenu.md), dans l'onglet **Éléments spéciaux**, sélectionner : 

<div align="left"><img src="/files/-LvtcRJo0YVWup7cx32P" alt="Carrousel"></div>

Ajouter des éléments dans la section **Élément de carrousel** et **Créer un nouvel enregistrement**.

Pour chaque élément :

{% tabs %}
{% tab title="Général" %}
**Image** : ajouter une image en arrière plan, automatiquement redimensionnée pour occuper l'ensemble de l'élément.

**Texte** : ajouter un **Titre** et **Sous-titre** centrés sur l'élément.

**Call to Action** : ajouter un bouton cliquable centré sur l'élément :

* Libellé affiché sur le bouton, non affiché si vide ;
* Lien vers la page ;
* Type de boutton désiré, modifie la couleur.
  {% endtab %}

{% tab title="Couleurs" %}
**Couleur du texte** : par défaut, le texte est affiché en blanc sur fond sombre, il est possible de choisir d'autres possibilités.

**Couleur de fond** : si l'élément ne possède pas d'image de fond, il est possible de paramétrer une couleur à la place.
{% endtab %}
{% endtabs %}

### Options du carrousel

Le carrousel possède plusieurs options de configuration et de comportement en fonction de la taille des écrans.

{% tabs %}
{% tab title="Paramètres" %}
**Interval** : définit le temps de pause entre deux éléments.

**wrapAround** : au dernier élément, le carrousel repart au premier élément.

**Alignement des cellules à l'intérieur du carrousel** : Dans le cas où plusieurs éléments sont affichés en même temps, il est possible de choisir leur alignement.

**Points de navigation** : affiche ou non les boutons de navigation.

**Boutons précédant/suivant** : affiche ou non les flèches de navigation.

**fondu** : définit l'effet de transition en fondu.

**Groups cells together in slides** : rassemble les éléments du carrousel en fonction du nombre définit sur le même écran.
{% endtab %}

{% tab title="Desktop" %}
Définit l'affichage sur Ordinateur

**Ratio de la cellule** : définit le ratio de l'image à afficher.

**Nombre de cellules pour le carrousel** : nombre d'élément à afficher en même temps.
{% endtab %}

{% tab title="Tablet" %}
Définit l'affichage sur Tablette

**Ratio de la cellule** : définit le ratio de l'image à afficher.

**Nombre de cellules pour le carrousel** : nombre d'élément à afficher en même temps.
{% endtab %}

{% tab title="Mobile" %}
Définit l'affichage sur Mobile

**Ratio de la cellule** : définit le ratio de l'image à afficher.

**Nombre de cellules pour le carrousel** : nombre d'élément à afficher en même temps.
{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://dsi-agrosup-dijon.gitbook.io/guide-utilisateur-dotea/gestion-des-pages/types-de-contenu/carousel.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.