--- url: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/lay-out/carrousel' title: 'Een carrousel toevoegen | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2023-11-06T09:27:15+00:00' updated: '2026-10-24T03:59:59+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Gebruik het lay-outelement Carrousel wanneer inhoud om beurten op één plek moet staan, zoals citaten, aanbiedingen of aankondigingen. Je krijgt slides die vanzelf wisselen, met een stip per slide. Anders dan de Afbeeldingcarrousel bevat elke slide willekeurige elementen: tekst, afbeeldingen, knoppen en meer. Het voorbeeld bouwt een slider met studentcitaten.' 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-24T03:59:59+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Een carrousel toevoegen' description: 'Gebruik het lay-outelement Carrousel wanneer inhoud om beurten op één plek moet staan, zoals citaten, aanbiedingen of aankondigingen. Je krijgt slides die vanzelf wisselen, met een stip per slide. Anders dan de Afbeeldingcarrousel bevat elke slide willekeurige elementen: tekst, afbeeldingen, knoppen en meer. Het voorbeeld bouwt een slider met studentcitaten.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2023-11-06T09:27:15+0000' dateModified: '2026-10-24T03:59:59+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/nl/hc/documentatie/dxpr-builder-leren/lay-out/carrousel' articleSection: Lay-out - '@type': WebPage '@id': 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/lay-out/carrousel' description: 'Gebruik het lay-outelement Carrousel wanneer inhoud om beurten op één plek moet staan, zoals citaten, aanbiedingen of aankondigingen. Je krijgt slides die vanzelf wisselen, met een stip per slide. Anders dan de Afbeeldingcarrousel bevat elke slide willekeurige elementen: tekst, afbeeldingen, knoppen en meer. Het voorbeeld bouwt een slider met studentcitaten.' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/nl' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: nl --- [Helpcentrum](/nl/hc)/[Documentatie](/nl/hc/documentatie) /[DXPR Builder leren](/nl/hc/documentation/learn-dxpr-builder) /[Pagina’s bouwen](/nl/hc/documentation/learn-dxpr-builder/build) /[Content toevoegen](/nl/hc/documentation/learn-dxpr-builder/elements) /[Lay-out](/nl/hc/documentation/learn-dxpr-builder/layout/overview) # Een carrousel toevoegen. DXPR Builder lerenPagina’s bouwenContent toevoegenLay-out ## In deze gids Gerelateerde gidsen - [Een afbeeldingscarrousel toevoegen](/nl/hc/documentatie/dxpr-builder-leren/elementen/afbeeldingscarrousel) - [Een tabbladenpaneel toevoegen](/nl/hc/documentatie/dxpr-builder-leren/lay-out/tabbladenpaneel) - [Animeer elementen bij scrollen, hover of klik](/nl/hc/documentatie/dxpr-builder-leren/ontwerp/animatie-tabblad) Gebruik het lay-outelement Carrousel wanneer inhoud om beurten op één plek moet staan, zoals citaten, aanbiedingen of aankondigingen. Je krijgt slides die vanzelf wisselen, met een stip per slide. Anders dan de [Afbeeldingcarrousel](/nl/hc/documentation/learn-dxpr-builder/elements/image-carousel) bevat elke slide willekeurige elementen: tekst, afbeeldingen, knoppen en meer. Het voorbeeld bouwt een slider met studentcitaten. ## Een carrousel toevoegen 1. Beweeg over de kolom en klik op **+** in de besturingsbalk om de elementenkiezer te openen. 2. Klik op het tabblad **Lay-out** op **Carrousel**. 3. Eerst openen de instellingen. Klik op **Opslaan** om de standaardwaarden te behouden. De carrousel verschijnt met één lege slide. 4. Klik op **+** in de slide en voeg inhoud toe, zoals een **Tekst**-element. 5. Om een slide toe te voegen beweeg je over de carrousel en klik je op **Slide toevoegen** in de besturingsbalk. Klik op de stip van de slide onder de carrousel om hem te openen en vul hem daarna op dezelfde manier. ## Wat je ziet De eerste slide toont met een balk per slide eronder. Elke 5 seconden schuift de volgende slide in, en na de laatste komt de eerste terug. Bezoekers kunnen op een balk klikken om naar een slide te springen, of swipen op een touchscreen. Elke slide krijgt de hoogte van de hoogste, zodat de inhoud onder de carrousel niet verspringt. ## Je carrousel instellen Open de instellingen via **More** > **Settings** in de besturingsbalk van **Carrousel**. Het paneel **Algemeen** bevat de timing. | Instelling | Wat het doet | Standaard | |---|---|---| | **Slides naast elkaar** | Hoeveel slides er naast elkaar staan, van 1 tot 10. Smalle schermen tonen er minder, tot één op telefoons | 1 | | **Automatisch afspelen uitschakelen** | Stopt het vanzelf wisselen van de slides | Uit | | **Interval voor automatisch afspelen** | Tijd tussen slides, van 1000 tot 20000 milliseconden | 5000 | | **Stoppen bij hover** | Pauzeert automatisch afspelen zolang de aanwijzer op de carrousel staat | Uit | | **Stippennavigatie** | In het paneel **Stippen**: toont een stip per slide | Aan | | **Volgende/Vorige** | In het paneel **Volgende/Vorige**: toont pijlknoppen | Uit | ### Stippen en pijlen Met **Stippennavigatie** aan biedt het paneel **Stippen** ook: - **Stippenoriëntatie**: **Buiten de slider** (eronder) of **Binnen de slider** - **Stipvorm**: **Balk**, **Cirkel**, **Vierkant** of **Driehoek** - **Transformatie van actieve stip**: **Geen**, **Hoger groeien**, **Breder groeien** of **Opschalen** - **Stipkleur** en **Actieve stipkleur** Met **Volgende/Vorige** aan biedt het paneel **Volgende/Vorige** ook: - **Oriëntatie**: **Buiten de slider** of **Binnen de slider** - **Stipvorm**: de knop achter elke pijl, **Geen achtergrond**, **Cirkel**, **Vierkant** of **Balk** - **Pictogramkleur**, **Pictogramkleur bij hover**, **Achtergrondkleur** en **Achtergrondkleur bij hover** - **Buitenste navigatiepositie**: **Aangrenzend**, **Boven in het midden**, **Linksboven**, **Rechtsboven**, **Onder in het midden**, **Linksonder** of **Rechtsonder** ## Slide-ideeën - **Testimonialslider**: zet op elke slide een **Blokcitaat** met het citaat en een **Tekst**-element met de naam. Houd **Stippennavigatie** aan en **Volgende/Vorige** uit, en zet **Interval voor automatisch afspelen** op 7000 zodat bezoekers kunnen uitlezen. - **Hero-carrousel**: open **More** > **Settings** van een slide en kies een foto als **Achtergrondafbeelding** in het paneel **Stijl**. Voeg een **Tekst**-element met de kop en een **Knop** toe. Zet **Stoppen bij hover** aan zodat bezoekers kunnen lezen en klikken. ## Als je het niet ziet - **Er staan geen stippen onder de carrousel.** Stippen verschijnen pas bij twee slides, en alleen met **Stippennavigatie** aan. Klik op **Slide toevoegen**, of zet **Stippennavigatie** aan in het paneel **Stippen**. - **De nieuwe slide verschijnt niet na Slide toevoegen.** Nieuwe slides worden achteraan toegevoegd en blijven verborgen tot je ze opent. Klik op de laatste stip onder de carrousel. - **De slides bewegen niet vanzelf.** **Automatisch afspelen uitschakelen** staat aan. Zet het uit in het paneel **Algemeen** van de carrouselinstellingen. - **Er zijn geen pijlen.** **Volgende/Vorige** staat standaard uit. Zet het aan in het paneel **Volgende/Vorige**. - **Carrousel ontbreekt op het tabblad Lay-out van de kiezer.** Je DXPR Builder-gebruikersprofiel sluit hem uit. Een beheerder vinkt **Carrousel** aan onder **Elementen** in je profiel op `/admin/dxpr_studio/dxpr_builder/profile`. ## Wat nu? - [Afbeeldingcarrousel](/nl/hc/documentation/learn-dxpr-builder/elements/image-carousel): een diashow van alleen afbeeldingen, ingesteld in één dialoog. - [Een tabbladenpaneel toevoegen](/nl/hc/documentation/learn-dxpr-builder/layout/tabs-element): laat bezoekers de inhoud kiezen in plaats van erop te wachten. - [Animatietabblad](/nl/hc/documentation/learn-dxpr-builder/design/animation-tab): voeg binnenkomsteffecten toe aan de inhoud van elke slide.