---
url: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/mise-en-page/mise-en-page-carrousel'
title: 'Ajouter un carrousel | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T14:23:25+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Utilisez l’élément de mise en page Carrousel quand vous voulez que
  du contenu se relaie au même endroit, comme des citations, des offres ou
  des annonces. Vous obtenez des diapositives qui avancent toutes seules,
  avec une pastille par diapositive. Contrairement au
  Carrousel d’images, chaque diapositive
  contient n’importe quels éléments : texte, images, boutons et plus.
  L’exemple construit un défilement de citations d’étudiants.
tags:
  - Layout
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Ajouter un carrousel'
      description: |-
        Utilisez l’élément de mise en page Carrousel quand vous voulez que
        du contenu se relaie au même endroit, comme des citations, des offres ou
        des annonces. Vous obtenez des diapositives qui avancent toutes seules,
        avec une pastille par diapositive. Contrairement au
        Carrousel d’images, chaque diapositive
        contient n’importe quels éléments : texte, images, boutons et plus.
        L’exemple construit un défilement de citations d’étudiants.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T14:23:25+0000'
      dateModified: '2026-10-24T17:19:22+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/mise-en-page/mise-en-page-carrousel'
      articleSection: 'Mise en page'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/mise-en-page/mise-en-page-carrousel'
      description: |-
        Utilisez l’élément de mise en page Carrousel quand vous voulez que
        du contenu se relaie au même endroit, comme des citations, des offres ou
        des annonces. Vous obtenez des diapositives qui avancent toutes seules,
        avec une pastille par diapositive. Contrairement au
        Carrousel d’images, chaque diapositive
        contient n’importe quels éléments : texte, images, boutons et plus.
        L’exemple construit un défilement de citations d’étudiants.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Accueil
            item: 'https://dxpr.com/fr'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: fr
---
[Centre d’aide](/fr/hc)/[Documentation](/fr/hc/documentation) /[Apprendre DXPR Builder](/fr/hc/documentation/learn-dxpr-builder) /[Créer des pages](/fr/hc/documentation/learn-dxpr-builder/build) /[Ajouter du contenu](/fr/hc/documentation/learn-dxpr-builder/elements) /[Mise en page](/fr/hc/documentation/learn-dxpr-builder/layout/overview) # Ajouter un carrousel.

 Apprendre DXPR BuilderCréer des pagesAjouter du contenuMise en page

   ## Dans ce guide

 Guides associés

- [Ajouter un carrousel d’images](/fr/hc/documentation/apprendre-dxpr-builder/elements/carrousel-d-images)
- [Ajouter un panneau d’onglets](/fr/hc/documentation/apprendre-dxpr-builder/mise-en-page/panneau-d-onglets)
- [Animer les éléments au défilement, au survol ou au clic](/fr/hc/documentation/apprendre-dxpr-builder/design/onglet-animation)

Utilisez l’élément de mise en page Carrousel quand vous voulez que du contenu se relaie au même endroit, comme des citations, des offres ou des annonces. Vous obtenez des diapositives qui avancent toutes seules, avec une pastille par diapositive. Contrairement au [Carrousel d’images](/fr/hc/documentation/apprendre-dxpr-builder/elements/carrousel-d-images), chaque diapositive contient n’importe quels éléments : texte, images, boutons et plus. L’exemple construit un défilement de citations d’étudiants.

## Ajouter un carrousel

1. Survolez la colonne et cliquez sur **+** dans sa barre de contrôle pour ouvrir le sélecteur d’éléments.
2. Dans l’onglet **Mise en page**, cliquez sur **Carrousel**.
3. Ses réglages s’ouvrent d’abord. Cliquez sur **Save** pour garder les défauts. Le carrousel apparaît avec une diapositive vide.
4. Cliquez sur **+** dans la diapositive et ajoutez du contenu, comme un élément **Texte**.
5. Pour ajouter une diapositive, survolez le carrousel et cliquez sur **Add slide** dans sa barre de contrôle. Cliquez sur la pastille de la diapositive sous le carrousel pour l’ouvrir, puis remplissez-la de la même façon.

  ## Ce que vous voyez

La première diapositive s’affiche avec une barre par diapositive en dessous. Toutes les 5 secondes, la suivante entre, et après la dernière, la première revient. Les visiteurs peuvent cliquer sur une barre pour sauter à une diapositive ou balayer sur un écran tactile. Chaque diapositive prend la hauteur de la plus haute, donc le contenu sous le carrousel ne saute pas.

## Régler votre carrousel

Ouvrez les réglages depuis **Plus** > **Paramètres** dans la barre de contrôle **Carrousel**. Le panneau **General** contient le minutage.

| Réglage | Rôle | Défaut |
|---|---|---|
| **Frames per slide** | Combien de diapositives s’affichent côte à côte, de 1 à 10. Les écrans étroits en montrent moins, jusqu’à une sur téléphone | 1 |
| **Disable auto-play** | Arrête l’avancée automatique des diapositives | Désactivé |
| **Auto-play interval** | Temps entre les diapositives, de 1000 à 20000 millisecondes | 5000 |
| **Stop on hover** | Suspend le défilement auto quand le pointeur est sur le carrousel | Désactivé |
| **Dots navigation** | Dans le panneau **Dots** : affiche une pastille par diapositive | Activé |
| **Next/Previous** | Dans le panneau **Next/Previous** : affiche des boutons flèches | Désactivé |

### Pastilles et flèches

Avec **Dots navigation** activé, le panneau **Dots** offre aussi :

- **Dots orientation** : **Outside slider** (en dessous) ou **Inside slider**
- **Dot shape** : **Bar**, **Circle**, **Square** ou **Triangle**
- **Active dot transformation** : **None**, **Grow taller**, **Grow wider** ou **Scale up**
- **Dot color** et **Active dot color**

Avec **Next/Previous** activé, le panneau **Next/Previous** offre aussi :

- **Orientation** : **Outside slider** ou **Inside slider**
- **Dot shape** : le bouton derrière chaque flèche, **No background**, **Circle**, **Square** ou **Bar**
- **Icon color**, **Icon hover color**, **Background color** et **Background hover color**
- **Outside navigation position** : **Adjacent**, **Top center**, **Top left**, **Top right**, **Bottom center**, **Bottom left** ou **Bottom right**

## Idées de diapositives

- **Défilement de témoignages** : mettez un **Block quote** avec la citation et un élément **Texte** avec le nom sur chaque diapositive. Gardez **Dots navigation** activé et **Next/Previous** désactivé, et réglez **Auto-play interval** sur 7000 pour que les visiteurs finissent de lire.
- **Carrousel héros** : ouvrez **Plus** > **Paramètres** d’une diapositive et choisissez une photo comme **Background image** dans son panneau **Style**. Ajoutez un élément **Texte** avec le titre et un **Bouton**. Activez **Stop on hover** pour que les visiteurs lisent et cliquent.

## Si rien ne s’affiche

- **Il n’y a pas de pastilles sous le carrousel.** Les pastilles ne s’affichent qu’avec deux diapositives, et seulement avec **Dots navigation**activé. Cliquez sur **Add slide**, ou activez **Dots navigation** dans le panneau **Dots**.
- **La nouvelle diapositive ne s’affiche pas après Add slide.** Les nouvelles diapositives s’ajoutent à la fin et restent cachées jusqu’à leur ouverture. Cliquez sur la dernière pastille sous le carrousel.
- **Les diapositives ne défilent pas toutes seules.** **Disable auto-play**est activé. Désactivez-le dans le panneau **General** des réglages du carrousel.
- **Il n’y a pas de flèches.** **Next/Previous** est désactivé par défaut. Activez-le dans le panneau **Next/Previous**.
- **Carrousel manque dans l’onglet Mise en page du sélecteur.** Votre profil d’utilisateur DXPR Builder l’exclut. Un administrateur coche **Carousel** sous **Elements** dans votre profil à `/admin/dxpr_studio/dxpr_builder/profile`.

## Et ensuite ?

- [Carrousel d’images](/fr/hc/documentation/apprendre-dxpr-builder/elements/carrousel-d-images) : un défilement d’images seules, réglé dans une seule boîte de dialogue.
- [Ajouter un panneau d’onglets](/fr/hc/documentation/apprendre-dxpr-builder/mise-en-page/panneau-d-onglets) : laisser les visiteurs choisir le contenu au lieu de l’attendre.
- [Onglet d’animation](/fr/hc/documentation/apprendre-dxpr-builder/design/onglet-animation) : ajouter des effets d’entrée au contenu de chaque diapositive.