> For the complete documentation index, see [llms.txt](https://dsi-agrosup-dijon.gitbook.io/guide-utilisateur-dotea/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dsi-agrosup-dijon.gitbook.io/guide-utilisateur-dotea/gestion-des-pages/types-de-contenu/carousel.md).

# 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 %}