--- url: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/layout/karussell-layout' title: 'Ein Karussell-Layout hinzufügen | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T08:33:57+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Nutzen Sie das Karussell-Layout-Element, wenn Inhalte sich an einer Stelle abwechseln sollen, etwa Zitate, Angebote oder Ankündigungen. Sie erhalten Slides, die automatisch weiterlaufen, mit einem Punkt pro Slide. Anders als im Image carousel fasst jeder Slide beliebige Elemente: Text, Bilder, Buttons und mehr. Das Beispiel baut einen Slider mit Studierenden-Zitaten.' 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: 'Ein Karussell-Layout hinzufügen' description: 'Nutzen Sie das Karussell-Layout-Element, wenn Inhalte sich an einer Stelle abwechseln sollen, etwa Zitate, Angebote oder Ankündigungen. Sie erhalten Slides, die automatisch weiterlaufen, mit einem Punkt pro Slide. Anders als im Image carousel fasst jeder Slide beliebige Elemente: Text, Bilder, Buttons und mehr. Das Beispiel baut einen Slider mit Studierenden-Zitaten.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T08:33:57+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/de/hc/dokumentation/dxpr-builder-lernen/layout/karussell-layout' articleSection: Layout - '@type': WebPage '@id': 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/layout/karussell-layout' description: 'Nutzen Sie das Karussell-Layout-Element, wenn Inhalte sich an einer Stelle abwechseln sollen, etwa Zitate, Angebote oder Ankündigungen. Sie erhalten Slides, die automatisch weiterlaufen, mit einem Punkt pro Slide. Anders als im Image carousel fasst jeder Slide beliebige Elemente: Text, Bilder, Buttons und mehr. Das Beispiel baut einen Slider mit Studierenden-Zitaten.' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Startseite item: 'https://dxpr.com/de' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: de --- [Hilfe-Center](/de/hc)/[Dokumentation](/de/hc/dokumentation) /[DXPR Builder lernen](/de/hc/documentation/learn-dxpr-builder) /[Seiten erstellen](/de/hc/documentation/learn-dxpr-builder/build) /[Inhalte hinzufügen](/de/hc/documentation/learn-dxpr-builder/elements) /[Layout](/de/hc/documentation/learn-dxpr-builder/layout/overview) # Ein Karussell-Layout hinzufügen. DXPR Builder lernenSeiten erstellenInhalte hinzufügenLayout ## In diesem Leitfaden Verwandte Leitfäden - [Ein Bilderkarussell hinzufügen](/de/hc/dokumentation/dxpr-builder-lernen/elemente/bilderkarussell) - [Ein Tabs-Panel hinzufügen](/de/hc/dokumentation/dxpr-builder-lernen/layout/tabs-element) - [Elemente bei Scroll, Hover oder Klick animieren](/de/hc/dokumentation/dxpr-builder-lernen/design/animation-tab) Nutzen Sie das Karussell-Layout-Element, wenn Inhalte sich an einer Stelle abwechseln sollen, etwa Zitate, Angebote oder Ankündigungen. Sie erhalten Slides, die automatisch weiterlaufen, mit einem Punkt pro Slide. Anders als im [Image carousel](/de/hc/dokumentation/dxpr-builder-lernen/elemente/bilderkarussell) fasst jeder Slide beliebige Elemente: Text, Bilder, Buttons und mehr. Das Beispiel baut einen Slider mit Studierenden-Zitaten. ## Ein Karussell-Layout hinzufügen 1. Fahren Sie über die Spalte und klicken Sie auf **+** in ihrer Kontrollleiste, um den Element-Picker zu öffnen. 2. Klicken Sie im Tab **Layout** auf **Carousel**. 3. Seine Einstellungen öffnen sich zuerst. Klicken Sie auf **Save**, um die Standards zu behalten. Das Karussell erscheint mit einem leeren Slide. 4. Klicken Sie auf **+** im Slide und fügen Sie Inhalt hinzu, etwa ein **Text**-Element. 5. Um einen Slide hinzuzufügen, fahren Sie über das Karussell und klicken Sie auf **Add slide** in seiner Kontrollleiste. Klicken Sie auf den Punkt des Slides unter dem Karussell, um ihn zu öffnen, und füllen Sie ihn genauso. ## Was Sie sehen Der erste Slide wird mit einem Balken pro Slide darunter angezeigt. Alle 5 Sekunden fährt der nächste Slide herein, und nach dem letzten kommt der erste zurück. Besucher können auf einen Balken klicken, um zu einem Slide zu springen, oder auf einem Touchscreen wischen. Jeder Slide übernimmt die Höhe des höchsten, sodass der Inhalt unter dem Karussell nicht springt. ## Ihr Karussell einrichten Öffnen Sie die Einstellungen über **More** > **Settings** in der Kontrollleiste von **Carousel**. Das Panel **General** enthält das Timing. | Einstellung | Funktion | Standard | |---|---|---| | **Frames per slide** | Wie viele Slides nebeneinander gezeigt werden, von 1 bis 10. Schmalere Bildschirme zeigen weniger, bis zu einem auf Telefonen | 1 | | **Disable auto-play** | Stoppt das automatische Weiterschalten der Slides | Off | | **Auto-play interval** | Zeit zwischen den Slides, von 1000 bis 20000 Millisekunden | 5000 | | **Stop on hover** | Pausiert Autoplay, solange der Zeiger über dem Karussell ist | Off | | **Dots navigation** | Im Panel **Dots**: zeigt einen Punkt pro Slide | On | | **Next/Previous** | Im Panel **Next/Previous**: zeigt Pfeil-Buttons | Off | ### Punkte und Pfeile Mit eingeschaltetem **Dots navigation** bietet das Panel **Dots** außerdem: - **Dots orientation**: **Outside slider** (darunter) oder **Inside slider** - **Dot shape**: **Bar**, **Circle**, **Square** oder **Triangle** - **Active dot transformation**: **None**, **Grow taller**, **Grow wider** oder **Scale up** - **Dot color** und **Active dot color** Mit eingeschaltetem **Next/Previous** bietet das Panel **Next/Previous** außerdem: - **Orientation**: **Outside slider** oder **Inside slider** - **Dot shape**: der Button hinter jedem Pfeil, **No background**, **Circle**, **Square** oder **Bar** - **Icon color**, **Icon hover color**, **Background color** und **Background hover color** - **Outside navigation position**: **Adjacent**, **Top center**, **Top left**, **Top right**, **Bottom center**, **Bottom left** oder **Bottom right** ## Slide-Ideen - **Testimonial slider**: Legen Sie auf jeden Slide ein **Block quote** mit dem Zitat und ein **Text**-Element mit dem Namen. Lassen Sie **Dots navigation** an und **Next/Previous** aus und setzen Sie **Auto-play interval** auf 7000, damit Besucher zu Ende lesen können. - **Hero carousel**: Öffnen Sie **More** > **Settings** eines Slides und wählen Sie ein Foto als **Background image** in seinem Panel **Style**. Fügen Sie ein **Text**-Element mit der Überschrift und einen **Button** hinzu. Schalten Sie **Stop on hover** ein, damit Besucher lesen und klicken können. ## Wenn Sie es nicht sehen - **Es gibt keine Punkte unter dem Karussell.** Punkte erscheinen erst ab zwei Slides und nur mit eingeschaltetem **Dots navigation**. Klicken Sie auf **Add slide** oder schalten Sie **Dots navigation** im Panel **Dots** ein. - **Der neue Slide erscheint nicht nach Add slide.** Neue Slides werden am Ende angefügt und bleiben verborgen, bis Sie sie öffnen. Klicken Sie auf den letzten Punkt unter dem Karussell. - **Die Slides laufen nicht von allein.** **Disable auto-play** ist an. Schalten Sie es im Panel **General** der Karussell-Einstellungen aus. - **Es gibt keine Pfeile.** **Next/Previous** ist standardmäßig aus. Schalten Sie es im Panel **Next/Previous** ein. - **Carousel fehlt im Layout-Tab des Pickers.** Ihr DXPR Builder-Benutzerprofil lässt es aus. Ein Administrator wählt **Carousel** unter **Elements** in Ihrem Profil unter `/admin/dxpr_studio/dxpr_builder/profile`. ## Wie geht es weiter? - [Image carousel](/de/hc/dokumentation/dxpr-builder-lernen/elemente/bilderkarussell): eine Slideshow nur aus Bildern, in einem Dialog eingerichtet. - [Ein Tabs-Panel hinzufügen](/de/hc/dokumentation/dxpr-builder-lernen/layout/tabs-element): Lassen Sie Besucher den Inhalt wählen, statt darauf zu warten. - [Animations-Tab](/de/hc/documentation/learn-dxpr-builder/design/animation-tab): Geben Sie dem Inhalt jedes Slides einen Auftrittseffekt.